Вызов компонентаDidMount, когда API отвечает

Question

В моем проекте у меня есть вызов действия, которое вызывает вызов webservice и, в свою очередь, посылает действия на результат ws, эти действия изменяют хранилище. Моя проблема заключается в:

ComponentDidUpdate() { 
    If (this.props.messages.length) { 
     Const items = this.props.messages.filter (this.isDisplayable); 
     This.timer = setInterval (() => { 
     If (items.length> 0) { 
      This.props.popItem (items); 
     } Else { 
      ClearInterval (this.timer); 
     } 
     }, This.props.interval); 
    } 
    } 

На самом деле он запущен несколько раз, и у меня есть предупреждения о

Внимание: flattenChildren (...): Столкнутые двое детей с тем же ключом, 1 , Детские ключи должны быть уникальными; Когда двое детей делят ключ, будет использоваться только первый ребенок.

Я использовал componentDidMount но он запускает его перед апи отвечает.

Мой вопрос: Есть ли способ обновить компонент только при ответе моего действия или, альтернативно, передать предупреждения?

Answer 1

В моем проекте у меня есть звонок к действию, которое вызывает вызов webservice и, в свою очередь, посылает действия на результат ws, эти действия изменяют хранилище.

Ни один из методов componentDidMount и componentDidUpdate являются хорошими. Наблюдайте за Store в Redux и соответствующим образом обновляйте свой компонент, когда найдено правильное действие TYPE.

Поскольку вы используете архитектуру Redux, состояние для всех ваших компонентов находится в одном месте — в магазине.

---

да я знаю, но проблема в том, что componentDidUpdate называется несколько раз, что дает мне ошибку индекса.

В реале это вполне нормально. Проверьте этот жизненный цикл.

---

Что вы должны сделать, это управлять Redux architecture. Я попробую сегодня предоставить некоторые диаграммы для вас. В общем, все, что вы делаете, будет из глобального магазина.

Вы можете забыть состояние React.Component и реквизиты, которые у вас были в приложениях, не относящихся к Redux.

Обычно вам необходимо использовать Wrapper в качестве поставщика контекста вокруг вашего приложения, где контекст является свойством React.Component.

Контекст будет передан всем детям и внукам, так что это будет глобальная организация магазина.

Затем вам нужно будет прочитать Store из контекста и вызвать два типичных метода: отправить и подписаться.

Answer 2

попробовать это:

componentWillReceiveProps(nextProps) { 
    if (this.props.messages === nextProps.messages) return; 

Answer 3

я имел некоторый problème и я решить ее путем обновления силы

forceUpdate() { 
     If (this.props.messages.length) { 
     ... 
     } 
     }