React调用setTodos更新状态时回调函数内props为undefined如何解决

问题原因 #

你混淆了类组件的setState方法和useState返回的状态更新函数的参数规则：

• 类组件的this.setState(updater)的updater函数确实支持(state, props) => newState的语法，第二个参数是组件当前的props
• 但你这里调用的setTodos是App组件中useState返回的状态更新函数，它的updater函数仅接收1个参数：当前最新的state值（也就是当前的todos数组），没有第二个props参数，所以你定义的第二个props形参自然是undefined。

修复方法 #

直接使用Form组件自身的props即可，你在submitTodoHandler方法里可以直接访问this.props，不需要从setTodos的updater参数里取，修改代码如下：

submitTodoHandler = (e) => {
  e.preventDefault();
  this.props.setTodos(prevTodos => {
    return [
      ...prevTodos,
      { text: this.props.inputText, completed: false, id: Math.random() * 1000 }
    ];
  });
};

这里的prevTodos就是setTodos传给updater的当前最新todos数组，可以避免依赖this.props.todos可能出现的状态过期问题。

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