React组件constructor中this.setState()无效，代码示例求解原因

嘿，我来帮你搞清楚这个问题！

首先要明确一个关键知识点：在React组件的constructor里调用this.setState()是完全无效的。

为什么呢？因为constructor是组件初始化的第一个阶段，此时组件还没有完成挂载，setState的核心作用是触发组件的重新渲染，但这时候组件连第一次渲染都还没开始，React根本不会处理这个状态更新请求。

回到你的代码来看：

• 你先在constructor里初始化了this.state = { age: '18' }，紧接着调用this.setState({id: 'name'})，但这个setState不会生效，所以最终你的组件状态里只有age这一个属性，id并没有被添加进去。
• 第一个<p>标签渲染this.state.id，因为id不存在，值是undefined，React在渲染undefined、null这类值时，不会显示任何内容，所以你看起来这个p标签像是“未显示”（其实标签本身是存在的，只是内容为空）。
• 第二个<p>标签渲染this.state.value，同样value也不在你的状态里，值也是undefined，你觉得它“被渲染”，大概率是看到了浏览器DOM里存在这个空的p标签，和第一个其实是一样的情况，只是视觉上的误解而已。

那怎么解决这个问题呢？有两种方式：

1. 如果是初始化时就需要这个状态，直接在state对象里定义：

class App extends React.Component {
  constructor(props) {
    super(props);
    // 直接在这里把需要的初始状态都定义好
    this.state = { 
      age: '18',
      id: 'name'
    };
  }
  render(){
    return (
      <div>
        <p>{this.state.id}</p>
        <p>{this.state.value}</p>
      </div>
    )
  }
}

2. 如果是需要在组件挂载完成后再设置状态，把setState放到componentDidMount生命周期钩子中：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { age: '18' };
  }
  
  componentDidMount() {
    // 组件挂载完成后调用setState，此时状态更新会生效
    this.setState({id: 'name'});
  }
  
  render(){
    return (
      <div>
        <p>{this.state.id}</p>
        <p>{this.state.value}</p>
      </div>
    )
  }
}

内容的提问来源于stack exchange，提问作者Mauj Mishra