React.js TypeError：解构不可迭代实例的无效尝试[重复]

Question

我用 Hooks 制作了简单的“待办事项列表”。

这个错误没有揭示问题出在哪里，所以我不知道在哪里解决它。 我搜索了解决此错误的提示，但我能找到一点。

此错误消息对我的代码意味着什么？

这是我的代码。

//actions.js
export const addTodo = todo => ({
  type: 'ADD_TODO',
  payload: {todo: todo}
})

//reducers.js
export const todoReducer = (state, action) => {
  switch(action.type){
    case 'ADD_TODO':
      return { todoList: [...state.todo, action.payload]};
    default:
      return state;
  }
}

//store.js
import * as React from 'react'
import { todoReducer } from "./reducers";

const initialState = {
  todoList: [],
}

export const Store = React.createContext(initialState)

export const StoreProvider = ({children}) => {
  const [state, dispatch] = React.useReducer(todoReducer, initialState)
  return (
    <Store.Provider value={{state, dispatch}}>{children}</Store.Provider>
  )
}

//component.jsx
import React from "react";
import { Store } from "./store";

const TODOLIST = () => {
  const [state, dispatch] = React.useContext(Store)
  return(
    <>
      <button onClick={() => dispatch({type: 'ADD_TODO', payload: state.todo})}>ADD</button>
      <ul>
        {state.todoList.map((tl, index) =>
          <li key={index}>{tl}</li>)}
      </ul>
    </>
  )
}

export default TODOLIST

//App.jsx
import TODOLIST from './component';

function App() {
  return (
    <>
      <TODOLIST />
    </>
  );
}

export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { StoreProvider } from "./store";

ReactDOM.render(
  <StoreProvider>
      <App />
  </StoreProvider>,
document.getElementById('root'));

Answer 1

纠正这个

export const todoReducer = (state, action) => {
  switch(action.type){
    case 'ADD_TODO':
      return { todoList: [...state.todoList, action.payload.todo]};
    default:
      return state;
  }
}

当您将 todo 对象传递给有效负载时

export const addTodo = todo => ({
  type: 'ADD_TODO',
  payload: {todo: todo}
})