在构造函数中调用 setState 会发出警告

Question

我有一个别人写的代码，其中 constructor 我已经 state 初始化，但如果 props 是 undefined，也称为 setState ，代码如下：

constructor(props) {
    super(props);
    this.state = {
        subId: props.match.params.subId
    }
   if(props!==undefined){
        this.setState({
            subId: props.match.params.subId 
        });
    }
}

当我执行我的模块时，我在控制台中收到警告 warning.js:35 Warning: setState(...): Can only update a mounted or mounting component.这通常意味着您在未安装的组件上调用了 setState() 。这是空操作。

我用谷歌搜索了一下，发现不应该在构造函数中调用 setState。但仍然无法理解构造函数中所做的事情以及反应所期望的理想方式。需要一些帮助来理解，构造函数中完成的代码是否正确，如果是，为什么，如果不是，为什么？

Answer 1

除了设置 state 和 setState 外，它还有重新渲染的机制。构造函数在实际安装之前执行，不会渲染任何东西。这就是为什么在构造函数中使用 setState 没有意义。

Answer 2

存在setState的原因是因为组件的state是不可变的，对它的更改会导致重新渲染组件。在构造函数中，直接在 this.state.

上更改状态即可

此外，您无需检查 props 是否为 undefined，react 确保它对您来说是 object，以及何时 undefined, 无论如何发生了严重的错误。

Answer 3

添加到已经给出的答案我想指出 setState 是一个异步操作。

javascript 中的任何构造函数本质上都是同步函数，必须构造和构造 class 的 "return" 实例。在构造函数中调用 setState 会使您处于未确定状态，其中 you/react 不能依赖组件构造已经完成的事实。

在构造函数中调用 setState 会发出警告

Calling setState in constructor gives warning

reactjs

react-lifecycle