React类组件传参报错：无法解构this.state的taskList，因它为null

核心错误点 #

• 未初始化组件状态：类组件的state默认是null，你没有在组件中初始化state，导致render里解构this.state时触发报错。
• 直接修改state：this.state.taskList.push(...)属于直接修改state的操作，React要求必须通过setState更新状态，直接修改不会触发组件重渲染，还会引发状态不可预测的问题。
• 事件函数未绑定this：handleChange和handleSubmit中的this会指向undefined，类方法默认不会自动绑定组件实例，导致调用setState时出错。

修复后的完整代码 #

type AppStates = {
  taskList: string[],
  inputValue: string,
}

class App extends Component<{}, AppStates> {
  // 初始化组件状态，确保this.state不为null
  state: AppStates = {
    taskList: [],
    inputValue: ""
  };

  // 用箭头函数定义方法，自动绑定组件实例的this
  handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    this.setState({inputValue: e.target.value});
  }

  handleSubmit = (e: React.MouseEvent<HTMLButtonElement>): void => {
    e.preventDefault();
    // 使用函数式更新state，基于旧状态创建新数组，保证状态不可变性
    this.setState(prevState => ({
      taskList: [...prevState.taskList, prevState.inputValue],
      inputValue: ""
    }));
  }

  render(): React.ReactNode {
    const {taskList, inputValue} = this.state;
    
    return (
      <div className='toDo-list'>
        <h1 className='toDo-list__header'>ToDo List</h1>
        <form className='toDo-list__form'>
          {/* 绑定value属性，将input转为受控组件 */}
          <input type="text" placeholder='Enter task' onChange={this.handleChange} value={inputValue}/>
          <button type="submit" onClick={this.handleSubmit}>Add task</button>
        </form>
        
        <TaskList taskList={taskList}/>
      </div>
    );
  }
}

修复说明 #

1. 初始化state：通过类字段语法直接初始化state，确保组件挂载时this.state有正确的结构，不再是null。
2. 正确更新状态：使用setState的函数式更新方式，基于旧状态创建新数组，避免直接修改原state数组，符合React的状态不可变原则。
3. 绑定this：用箭头函数定义事件处理方法，自动绑定组件实例的this，解决setState调用时this指向错误的问题。
4. 受控组件改造：给input添加value={inputValue}绑定，让输入框的值和组件状态保持同步，保证输入行为的可预测性。

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