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

IT技术 javascript reactjs react-redux
2021-04-06 04:19:02

我有一个帖子列表,我试图在每个帖子的构造函数或 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();
         }
      }   
}
3个回答

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

这不是一个错误,而是为了确保构造函数是纯的故意行为。 https://github.com/facebook/react/issues/12856#issuecomment-613145789

通过https://reactjs.org/docs/strict-mode.html了解更多信息

这是一个很好的答案。这是一个糟糕的设计选择。
2021-06-11 04:19:02

好吧,当您的构造函数和您的 componentDidMount 函数都触发两次时,您可以确定所讨论的组件在某处构造了两次。

如果您没有运行 StrictMode(如果是,请参阅 papacool 的回答:这是设计使然),当构造函数中的代码运行两次时,您可以确保组件被重新创建两次。发生这种情况的原因有多种,最简单的原因可能是该组件在多个地方使用:

<MyComponent />
<MyComponent />

另一个原因可能是您有条件渲染,这意味着您可能基于布尔值进行渲染,这会发生变化:

{ myBoolean && <MyComponent /> }

如果您切换 myBoolean 两次,构造函数将被执行两次。