Question

我正在尝试从仪表板页面this.props.dataActions.addChild(this.props.user.children.data[0])发送数据操作。

但是我有一个循环问题。在这种情况下，我不知道该怎么办。请在下面检查我的代码：

我试图将加载内容添加到componentDidUpdate中，但没有帮助。

componentDidUpdate() {
    // 
    console.log(this.state.loading)
    if (this.props.user && this.props.user.children && this.props.user.children.data) {
      console.log('iiiii', this.props.user.children.data[0])
      this.props.dataActions.addChild(this.props.user.children.data[0])
      if (!this.state.loading) {
        this.setState({ selectedChildren: this.props.user.children.data[0] })
      }

    }
  }

请检查屏幕截图：

停止循环并一次发送this.props.dataActions.addChild的最佳方法是什么

https://ibb.co/rm18W1b

仪表板索引代码： https://pastebin.com/5V2ceAHK

Answer 1

1-在Update生命周期函数（例如componentWillUpdate，componentDidUpdate）中使用setState不好。可能会导致循环。

2-如果要一次执行此操作，然后在需要在某个事件上运行时使用componentWillMount，然后创建一个函数，并在单击或任何事件触发时调用它。

3-更新道具会导致与componentWillRecieveProps循环。并且设置状态会导致与componentWillUpdate，componentDidUpdate循环。

4-您可以将代码分成更多组件，以帮助您管理状态。

在生命周期中再次查看您的状态和道具将帮助您找到所需的方式。我无法通过了解情况来提供确切的解决方案，但是会导致问题的解决。

Answer 2

不建议在didUpdate生命周期内使用setState。但是，如果您对生命周期方法没有选择，则必须非常小心设置状态的条件

componentDidUpdate() {
    // 
    console.log(this.state.loading)
    if (this.props.user && this.props.user.children && this.props.user.children.data) {
      console.log('iiiii', this.props.user.children.data[0])
      this.props.dataActions.addChild(this.props.user.children.data[0])
      if (
        !this.state.loading &&
        this.state.selectedChildren !== this.props.user.children.data[0] // see this line here ??
      ) {
        this.setState({ selectedChildren: this.props.user.children.data[0] })
      }

    }
  }

在上面的代码中，您应该检查selectedChildren是否不是您所处的状态

this.state.selectedChildren !== this.props.user.children.data[0]

如果此selectedChildren是对象，则必须使用对象比较模块，这些模块是定制的或来自供应商软件包的。有关对象相等性的更多信息，请参见this

编辑：在您的代码中

componentDidUpdate(prevProps) {
    //

    if (
      this.props.user && 
      this.props.user.children && 
      this.props.user.children.data &&
      checkIf_prevProps.child isNotEqualTo this.props.user.children.data[0]
    ) {
      console.log('iiiii', this.props.user.children.data[0])
      this.props.dataActions.addChild(this.props.user.children.data[0])
    }
  }

因此，检查是否为checkIf_prevProps.child isNotEqualTo this.props.user.children.data[0]。或者简单地检查状态变量中的任何条目，以使您知道状态已经更新。但是请记住，这是保护无限渲染的肮脏技巧。

如何解决“加载后发送操作，循环问题”

2 个答案: