React类组件列表为何需再次提交/onChange才更新值？

问题根源 #

1. setState异步特性：调用setState后立刻访问this.state，此时state还未完成更新，拿到的始终是旧值。不管是addValue里的console.log，还是handleList里调用addList时的this.state.listAdd，都是这个原因导致拿不到最新值。
2. 直接操作DOM不符合React逻辑：React是数据驱动视图的框架，手动创建DOM节点添加的方式，没法和state的更新同步，这也是显示延迟的诱因之一。

修复方案 #

改造成完全由state管理列表数据，利用setState的回调获取最新值，让render自动渲染列表：

class List extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      listValue: '',
      listItems: [] // 用数组维护列表项，替代手动操作DOM
    }

    this.handleList = this.handleList.bind(this);
    this.addValue = this.addValue.bind(this);
  }

  handleList(){
    // 使用setState的回调函数，确保拿到更新后的state
    this.setState({
      listItems: [...this.state.listItems, this.state.listValue],
      listValue: '' // 添加后清空输入框
    }, () => {
      // 若需在state更新后执行操作，写在此回调内
      console.log('更新后的列表:', this.state.listItems);
    });
  }

  addValue(event){
    const newValue = event.target.value;
    this.setState({
      listValue: newValue
    }, () => {
      // 查看最新state必须在回调里
      console.log('当前输入值:', this.state.listValue);
    });
  }

  render(){
    return(
      <div className="box1">
        <textarea 
          className="textArea" 
          maxLength={68} 
          onChange={this.addValue}
          value={this.state.listValue} {/* 受控组件，绑定state值 */}
        ></textarea>
        <button className="submit" onClick={this.handleList}>Add</button>
        <ul className="listBox">
          {/* 用map渲染列表，完全由state驱动 */}
          {this.state.listItems.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

关键修改点说明 #

• 新增listItems数组state存储所有列表项，替代手动DOM操作
• 将textarea改为受控组件，绑定value={this.state.listValue}，确保输入框值与state完全同步
• 使用setState的第二个参数（回调函数）获取更新后的state值，避免异步导致的旧值问题
• 在render里用map遍历listItems自动生成li节点，遵循React数据驱动视图的核心原则

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