React动态添加的子组件无法接收更新值的问题求助

你碰到的这个问题其实是对React状态管理和渲染流程的一个常见误解——你把已经渲染好的组件实例存在了state里，而不是存储生成组件所需的数据。

问题根源 #

当你点击Add按钮调用handleAdd时，你是把当时this.state.text的值（也就是"Starting"）直接传递给了新创建的<Child1>组件，然后把这个已经生成的组件实例存在了this.state.children数组里。这就相当于把这个组件的props给“固定死”了，后续即使this.state.text更新成了"Boom"，这个已经存在于state里的组件实例不会再重新读取最新的state值，因为它的props在创建时就被固化了。

而页面上一开始就存在的那个<Child1>，每次App组件render时都会重新生成，所以它能拿到最新的this.state.text，自然会跟着更新。

修复方案 #

按照React的最佳实践，state里应该存储的是数据，而不是组件实例。我们只需要在state里记录需要渲染多少个动态子组件，然后在render方法里动态生成这些组件，这样每次state更新时，所有子组件都会根据最新的state重新生成，就能拿到最新的props了。

修改后的代码如下：

class App extends React.Component {
  constructor(props) {
    super(props);
    // 用计数记录需要渲染的动态子组件数量
    this.state = { text: "Starting", childCount: 0 };
  }
  handleClick() {
    this.setState({ text: "Boom" });
  }
  handleAdd() {
    // 只更新计数，不直接创建组件
    this.setState({ childCount: this.state.childCount + 1 });
  }
  render() {
    // 根据计数动态生成所有子组件，每次渲染都用最新的state值
    const dynamicChildren = Array.from({ length: this.state.childCount }, (_, index) => (
      <Child1 key={index} text={this.state.text}></Child1>
    ));
    
    return (
      <div>
        <Child1 text={this.state.text}></Child1>
        {dynamicChildren}
        <button onClick={() => this.handleClick()}>Change</button>
        <button onClick={() => this.handleAdd()}>Add</button>
      </div>
    );
  }
}
class Child1 extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render( <App /> );

为什么这样有效？ #

• 我们把state.children换成了childCount，只记录需要渲染的动态子组件数量，这是纯数据，符合React state的使用规范。
• 每次App组件render时，都会根据当前的childCount和最新的text值，动态生成所有的<Child1>组件。这样不管是一开始的静态组件，还是后来添加的动态组件，都会拿到最新的this.state.text作为props。
• 完全遵循了React的单向数据流原则：state变化 → render重新执行 → UI更新，所有依赖state的组件都会同步更新。

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