API响应时调用componentDidMount

Question

在我的项目中，我调用了一个进行Web服务调用的操作，然后将操作分配给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 ，但它在api响应之前启动它。

我的问题是： 是否有办法仅在我的操作响应时更新组件，或者传递警告？

Answer 1

  

在我的项目中，我调用了一个进行Web服务调用的操作，然后将操作分配给ws的结果，这些操作会编辑商店。

componentDidMount和componentDidUpdate方法都不好。 观察Redux中的Store，并在找到正确的操作类型时相应地更新组件。

由于您使用的是Redux架构，因此所有组件的状态都在一个位置 - 在商店中。

  

是的，我知道，但问题是componentDidUpdate被多次调用，这给了我索引错误。

这在React中很正常。检查此生命周期。

你应该做的是管理Redux architecture。 我今天会尝试为你提供一些图表。 通常，您所做的任何事情都来自全球商店。

您可能会忘记React.Component状态，以及非Redux应用程序中的道具。

您通常需要使用Wrapper作为应用程序周围的上下文提供程序，其中上下文是React.Component的属性。

上下文将传递给所有子孙，因此这将成为全球商店组织。

然后你需要从上下文中读取Store，并调用两个典型的方法：dispatch和subscribe。

Answer 2

试试这个：

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

Answer 3

我有一些问题，我通过强制更新来解决它

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