ReactJS中onChangeHandler无法设置状态，待办清单提交功能异常

问题根源 #

你的代码里有几个关键错误导致状态无法更新、任务无法正确添加：

1. setState使用方式错误：setState是类组件的方法，必须通过this.setState({ ... })调用，而不是赋值操作this.setState={ ... }，这是状态无法更新的核心原因。
2. 异步状态更新的日志问题：setState是异步执行的，直接在调用后console.log拿不到最新状态。
3. 直接修改原state数组：提交任务时直接修改this.state.allTask原数组，React无法检测到这种变化，导致状态更新失效。

修改后的完整代码 #

Cockpit组件（转为受控组件） #

const cockpit = (props) => {
    return (
        <div>
            <form onSubmit={props.submitted}>
                <input 
                    type="text" 
                    placeholder="Title" 
                    onChange={props.ChangeTitle}
                    value={props.title} // 绑定状态值，实现受控组件
                />
                <textarea 
                    rows={2} 
                    onChange={props.changeTask}
                    value={props.task} // 绑定状态值
                />
                <input type='submit' value='ADD TASK'/>
            </form>
        </div>
    );
}

App.js文件 #

import "./App.css";
import { React, Component } from "react";
import Cockpit from "./Components/Cockpit";

class App extends Component {

  state = {
    title:'',
    task: '',
    allTask : [] 
  };

  onChangeTitleHandler = (event)=>{
    // 正确调用setState方法
    this.setState({
      title: event.target.value,
    }, () => {
      // 在回调中打印最新状态（异步更新完成后执行）
      console.log(this.state.title);
    })
  }
  
  onChangeTaskHandler =(event)=>{
    this.setState({
      task: event.target.value,
    }, () => {
      console.log(this.state.task);
    })
  }

  onSubmitHandler =(event) => {
    event.preventDefault();
    // 创建新数组，避免修改原state（遵循React不可变状态原则）
    const newTasks = [...this.state.allTask, {
      title: this.state.title,
      task: this.state.task
    }];
    this.setState({
      allTask: newTasks,
      // 提交后清空输入框状态
      title: '',
      task: ''
    }, () => {
      console.log(this.state.allTask);
    });
  };

  render() {
    return (
      <div className="App">
        <h1 className="heading">Prioritise Your Tasks</h1>
        <Cockpit 
          ChangeTitle={this.onChangeTitleHandler}
          changeTask={this.onChangeTaskHandler}
          submitted={this.onSubmitHandler}
          title={this.state.title}
          task={this.state.task}
        />
      </div>
    );
  }
}

export default App;

修改说明 #

• 修正setState的调用方式，确保状态能正确更新
• 使用setState的回调函数获取最新状态，解决异步更新导致的日志错误
• 通过扩展运算符创建新数组更新allTask，保证React能检测到状态变化
• 给输入框绑定value属性，将组件转为受控组件，确保输入内容与状态完全同步
• 提交任务后清空title和task状态，方便下一次输入

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