React数组添加组件后setState不触发渲染？求助解决方案

嘿，这个问题其实戳中了React渲染机制里很容易踩坑的点，我来给你拆解清楚～

首先得先说明：你第一个案例能正常显示83，其实是个巧合的反模式，并不是正确的React用法。

为什么第一个案例能“正常”工作？ #

children是组件外部的全局数组，当你在componentDidMount里push(3)修改它，然后调用setState触发组件重渲染。此时render函数重新执行，读取的是已经被修改后的children数组，所以页面显示了83。但这里的问题是：React根本不知道children这个外部变量发生了变化，它只是因为setState触发了重渲染，才“顺便”读到了更新后的数组。这种依赖外部变量的写法本身就不稳定。

为什么添加组件后就失效了？ #

当你在{children}旁边添加另一个组件时，React的diff算法在对比DOM树时，可能会因为某些优化逻辑（比如对数组/文本节点的浅比较），没有识别到外部数组的变化。更核心的原因是：children不属于组件的state或props，React的渲染依赖是严格绑定在自身状态和属性上的，外部变量的变化不在React的追踪范围内，所以一旦渲染逻辑有变化，这种“巧合”就会失效。

正确的解决方案：把数组放到组件状态里 #

要让React可靠地追踪数组变化并更新页面，应该把children作为组件state的一部分。这样修改数组后通过setState更新状态，React就能正确感知变化并触发渲染。

修改后的代码如下：

class PersonList extends React.Component {
  state = { 
    trigger: 0,
    children: [8] // 将数组放入state
  }
  componentDidMount() {
    // 注意：不要直接修改原state数组，要创建新数组（React要求状态不可变）
    this.setState(prevState => ({
      children: [...prevState.children, 3],
      trigger: 1
    }));
  }
  render() {
    return (
      <div>
        {this.state.children}
        {/* 现在添加任意组件都不会影响更新了 */}
        <p>这是新增的组件</p>
      </div>
    );
  }
}
ReactDOM.render( <PersonList/>, document.getElementById('root') );

关键总结 #

React组件的渲染应该只依赖自身的state和props，外部变量、全局变量都不属于React的状态管理体系，依赖它们会导致不可预测的渲染行为。保持状态的“不可变性”（比如修改数组时创建新数组）也是确保React正确识别状态变化的重要原则。

内容的提问来源于stack exchange，提问作者Jialong Lin