React数组setState不生效：Inbox组件复选框需第三次点击才响应

嘿，我来帮你搞定这个复选框的问题！你的核心问题出在直接修改state里的数组引用，再加上PureComponent的浅比较机制，导致前两次点击后组件没触发重渲染。

问题根源拆解 #

• PureComponent的浅比较特性：PureComponent会对比新旧state/props的引用是否相同来决定是否重渲染。你直接修改原数组state[i] = !state[i]，然后把同一个数组引用传给setState，这时候浅比较会认为state没变化，所以组件不会重新渲染。
• constructor的遗漏：你的组件构造函数里没写super(props)，这是React类组件的必要步骤，不调用它的话this无法正确初始化，可能会引发其他潜在问题。

修复方案 #

你需要创建数组的新副本，而不是直接修改原数组，让setState拿到全新的引用，这样PureComponent就能检测到state变化并触发重渲染了。同时补上super(props)。

修复后的完整代码：

class Inbox extends PureComponent { 
  constructor(props){ 
    super(props); // 必须调用super(props)初始化组件实例
    this.state = { checked: [true] };
    // 绑定this（可选，但推荐，避免箭头函数的额外开销）
    this.updateCheck = this.updateCheck.bind(this);
  } 

  updateCheck(i, convId) { 
    // 用扩展运算符创建原数组的浅拷贝，得到新引用的数组
    const newChecked = [...this.state.checked];
    newChecked[i] = !newChecked[i];
    // 传递包含新数组的state对象
    this.setState({ checked: newChecked });
  } 

  render() { 
    // 假设你是在渲染多个复选框，这里用map示例
    return ( 
      <div>
        {this.state.checked.map((isChecked, index) => (
          <input 
            key={index} // 尽量用唯一ID（比如convId）代替index作为key
            type="checkbox" 
            checked={isChecked} 
            onClick={() => this.updateCheck(index, convId)} 
          />
        ))}
      </div>
    );
  } 
}

额外说明 #

• 除了扩展运算符，你也可以用slice()或者map来创建新数组，效果是一样的：

  // 用slice创建副本
  const newChecked = this.state.checked.slice();
  // 用map修改指定项
  const newChecked = this.state.checked.map((item, idx) => idx === i ? !item : item);
  

• 尽量不要用index作为列表元素的key，最好用每个项的唯一标识（比如你的convId），这能避免React列表渲染时的性能问题和错误。

内容的提问来源于stack exchange，提问作者Ashish Choudhary