【问题标题】:Calling setState in constructor gives warning在构造函数中调用 setState 会给出警告
【发布时间】:2017-08-17 12:22:40
【问题描述】:

我有一个由其他人编写的代码,其中 constructor 初始化了 state,但如果 propsundefined,也称为 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 警告:setState(...):只能更新已安装或已安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是无操作的。

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

【问题讨论】:

  • if语句不是不需要吗?

标签: reactjs react-lifecycle


【解决方案1】:

除了已经给出的答案,我想指出setState 是一个异步操作。

javascript 中的任何构造函数本质上都是同步函数,必须构造并“返回”正在构造的类的实例。在构造函数中调用 setState 会使您处于未确定状态,您/react 无法依赖组件构造已完成的事实。

【讨论】:

  • 使用this.state = {//...你的状态},调用setState是在设置之前和组件挂载之前改变状态,这会违背react的生命周期组件
【解决方案2】:

setState 存在的原因是因为组件的state 是不可变的,对其进行更改会导致重新渲染组件。在构造函数中,直接在this.state上更改状态即可。

另外,您无需检查props 是否为undefinedreact 确保它是适合您的object,当它是undefined 时,无论如何都发生了严重错误。

【讨论】:

  • 但是如果没有定义 props,那么 state 会被初始化吗??
  • 你是对的。状态始终是一个对象,构造函数中的赋值只是为其添加属性,否则为空。
【解决方案3】:

除了将state 设置为setState 之外,它还具有在更改时重新渲染的机制。构造函数在实际挂载之前执行,并且不会渲染任何内容。这就是为什么在构造函数中使用setState 毫无意义。

【讨论】:

  • 如果我没有定义道具怎么办,我应该在哪里再次设置状态而不是在构造函数中进行设置
  • @OMTheEternity:您可以直接在constructor 内部比较props。例如:subId: props ? props.match.params.subId : 0
  • 谢谢@FiriceNguyen 哦!!!那一刻你也忘记了愚蠢的事情:)
  • 但是如果没有定义props,那么state会被初始化吗??
  • @OMTheEternity 不要检查是否定义了 prop 来设置状态。直接用 Firice Nguyen 提供的三元算子设置即可。
猜你喜欢
  • 2019-11-10
  • 2021-12-19
  • 1970-01-01
  • 1970-01-01
  • 2013-12-22
  • 2013-01-27
  • 2018-01-05
  • 2014-08-25
  • 2017-08-05
相关资源
最近更新 更多