無法運行Redux的待辦事項例如（待辦事項陣列未定義）

Question

雖然在一個非常類似的問題： 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））

步驟重現：

I.安裝的依賴關係：

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

II。建立：

npm run build 

三，運行本地服務器：

cd dist && npm run test:server 

四，導航在瀏覽器中：

http://localhost:8080 

五BUG重現

1. 添加待辦事項元素
2. 一下就可以了（和觀看的JavaScript輸出）

Answer 1

我經歷了你git回購。我發現你還沒有返回todos.js reducer中創建的待辦事項對象，以採取行動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 
    }) 

讓我知道這是否工作。

Answer 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 
)