React中this.forceUpdate()无法渲染动态创建组件问题排查

你遇到的问题核心在于直接将React元素存储在类的普通属性中，而非使用React的state来管理状态。虽然forceUpdate()确实触发了组件重渲染（随机数变化可以证明），但这种存储React元素的方式不符合React的状态管理机制，导致虚拟DOM对比时无法正确识别新增的元素。

为什么会出现这个问题？ #

React的渲染机制依赖于状态（state）或属性（props）的变化来更新UI。你把<TextBox>元素直接存在this.questions这个类属性里，即使数组内容变更，React也无法追踪这个属性的变化——哪怕调用forceUpdate()，也可能因为React元素的引用特性，导致虚拟DOM对比时没有检测到需要新增的节点。

另外，直接存储React元素的做法本身就不推荐，React更希望你存储数据，然后在render阶段根据数据动态生成元素，这样能更好地保证UI和状态的一致性。

修复代码的步骤 #

1. 把questions从类属性移到组件的state中，存储数据（比如每个输入框的唯一标识，这里用简单的计数数组即可）。
2. 在createTextBox方法中，更新state而非直接修改类属性，React会自动触发重渲染，无需调用forceUpdate()。
3. 在render阶段，根据state中的数据动态生成<TextBox>元素。

修复后的代码如下：

constructor (props) {
  super(props);
  // 用state存储数据，初始包含一个输入框的标识
  this.state = {
    questions: [0]
  };
  this.createTextBox = this.createTextBox.bind(this);
}

createTextBox() {
  // 基于旧state更新新状态，避免竞态问题
  this.setState(prevState => ({
    questions: [...prevState.questions, prevState.questions.length]
  }));
}

render() {
  return(
    <div>
      <h4>Random number : {Math.random()}</h4>
      {/* 根据state数据动态生成TextBox组件 */}
      {this.state.questions.map(key => (
        <TextBox key={key} />
      ))}
      <ButtonToolbar className="add-question">
        <DropdownButton bsSize="large" title="Add" id="dropdown-size-large" dropup pullRight>
          <MenuItem eventKey="1" onClick={this.createTextBox}>Text Box</MenuItem>
        </DropdownButton>
      </ButtonToolbar>
    </div>
  );
}

关键改进点 #

• 用state管理状态：React会监听state的变化，自动触发重渲染，无需手动调用forceUpdate()。
• 存储数据而非React元素：我们存储的是每个输入框的唯一key值，在render时动态生成<TextBox>，这样React能准确识别新增元素，保证UI正确更新。
• 函数式更新state：当新状态依赖于旧状态时，用setState的函数形式可以避免状态更新的竞态问题，确保每次都基于最新的state进行修改。

这样修改后，点击"Text Box"菜单时，新的<TextBox>就会正确显示在页面上了。

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