使用React Js开发简易Todolist，新增待办时state未更新如何解决？

核心问题点 #

• Context.js 中定义的全局dispatch方法存在语法错误，setState回调未返回reducer计算后的新状态，导致全局状态无法更新。你当前的dispatch实现中，仅执行了reducer函数但没有将它的返回值传递给setState，setState收到undefined后不会触发任何状态更新，这是待办项不显示的核心原因。
• 你提到的页面重载本质是路由跳转操作this.props.history.push('/')触发的视图切换，不是错误行为，调整后跳转后就能看到新增的待办项。

修复代码 #

1. 修复Context.js中的dispatch方法 #

找到Provider组件state里的dispatch定义，修改为如下代码：

dispatch: action => {
  this.setState(state => {
    // 必须返回reducer处理后的新状态，setState才会执行更新
    return reducer(state, action)
  })
}

也可以用箭头函数简写形式，省略return和大括号：

dispatch: action => this.setState(state => reducer(state, action))

2. 可选优化（非必须，仅优化性能） #

InputTodo.js中可以把事件绑定放到constructor里，避免render时每次生成新函数：

constructor(props){
  super(props);
  this.state={
    inputValue:""
  };
  // 提前绑定this，避免render重复生成新函数
  this.OnChange = this.OnChange.bind(this)
}

验证效果 #

修改完成后重新运行项目，新增待办提交时全局state会正确更新，路由跳转到首页后就能看到新添加的待办项。

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