无法运行 redux 待办事项示例（待办事项数组未定义）答案

【问题标题】：Unable to run redux todo example (todos array undefined)无法运行 redux 待办事项示例（待办事项数组未定义）
【发布时间】：2018-03-22 04:20:44
【问题描述】：

虽然有一个非常相似的问题： Failed prop type: The prop todos[0].id is marked as required in TodoList, but its value is undefined

看起来只有症状是相同的（我按照建议更正了所有导入）

我可以添加一个待办事项元素，但是当我单击一个元素时，todos 数组不知何故变成了undefined，并且控制台打印出以下错误：

Warning: Failed prop type: The prop `todos[0]` is marked as required in `TodoList`, but its value is `undefined`.

我创建了一个最小的示例存储库，它在以下位置显示了问题： https://github.com/klaszlo/redux-todo-nonworking

((原例：https://github.com/reactjs/redux/tree/master/examples/todos))

重现步骤：

我。安装依赖：

git clone https://github.com/klaszlo/redux-todo-nonworking.git
cd redux-todo-nonworking 
npm install

二。构建：

npm run build

三。运行本地服务器：

cd dist && npm run test:server

四。在浏览器中导航到：

http://localhost:8080

V。 BUG重现

添加待办事项元素
点击它（并观看 javascript 输出）

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

我浏览了你的 git repo。我发现你没有在 todos.js reducer 中返回创建的 todo 对象以供操作TOGGLE_TODO。

case 'TOGGLE_TODO':
console.log('todo state:', state);
  return state.map(todo => {
    console.log('inside state', todo);
    return (todo.id === action.id) ? Object.assign({}, todo, {completed: !todo.completed}) : todo
  })

让我知道这是否有效。

【讨论】：

【解决方案2】：

问题出在todos reducer 监听TOGGLE_TODO。为了执行console.log，您已将箭头函数中的() 更改为{}，但忘记使用Array.prototype.map 函数所需的return。
使用这个：

case 'TOGGLE_TODO':
console.log('todo state:', state);
  return state.map(todo => (
    (todo.id === action.id) ? Object.assign({}, todo, {completed: !todo.completed}) : todo
  )

【讨论】：