Question

我有一个帖子列表，我试图为每个帖子在构造函数或componentDidMount内部调用一个动作。但是以某种方式，当我发送新消息时，构造函数和componentDidMount函数会被调用两次。

 constructor(props) {
    super(props);

    if (condition1) {
       this.props.actions.action1();
    } else if (condition2) {
       this.props.actions.action2();
    }    
}

从列表中读取帖子时，这些函数仅被调用一次。但是，当我发送新消息时，它们被称为两次。

如何避免这些情况。我试图像这样使用componendDidUpdate函数：

componentDidUpdate(prevProps, prevState) {     
      if (prevProps.post.id !== this.props.post.id) {
         if (condition1) {
            this.props.actions.action1();
         } else if (condition2) {
            this.props.actions.action2();
         }
      }   
}

Answer 1

在严格模式下，两次调用了React构造函数。 https://stackoverflow.com/a/61443443/6014725

这不是错误，而是有目的的行为，以确保构造函数是纯净的。 https://github.com/facebook/react/issues/12856#issuecomment-613145789

通过https://reactjs.org/docs/strict-mode.html

了解更多信息

Answer 2

好吧，当构造函数和componentDidMount函数都触发两次时，您可以确定所讨论的组件在某个地方构造了两次。您可以与我们共享在实现有问题的组件时所使用的代码吗？

react.js构造函数被调用两次

2 个答案: