React+Redux实现任务列表时点击添加按钮表格不显示问题排查

App.js中的mapDispatchToProps定义错误，没有将调用时传入的text、time参数传递给action creator，导致派发的action中没有有效数据，reducer存储的任务项内容为空，所以渲染时看不到内容，换成列表也只能显示空元素的默认样式。

具体修复代码 #

修改components/App.js中的mapDispatchToProps方法：

// 原错误写法：没有接收和传递参数
// function mapDispatchToProps(dispatch) {
//   return {
//       add_task : () => dispatch(add_task())
//   }
// }

// 修正后写法：接收参数并传入action creator
function mapDispatchToProps(dispatch) {
  return {
      add_task : (text, time) => dispatch(add_task(text, time))
  }
}

验证逻辑 #

修复后点击Add按钮，可查看控制台输出的Add action日志，能看到text和time字段已经填入了输入框的内容，reducer输出的tasks数组也会携带有效内容，表格即可正常渲染。

内容的提问来源于stack exchange，提问作者Qatr El-Nada