在Redux中添加Todo，无法读取属性SymbolSymbol.iterator

问题描述

我要向该数组添加一个对象，第二次我想添加另一个对象时，整个数组成为第一位，但最终出现错误，我的目标是向Redux编程Todo任务。

我也收到此错误：

TypeError：无法读取未定义的属性'length'
TypeError：undefined不可迭代（无法读取属性Symbol（Symbol.iterator））

// todoReducer.js

import {ADD_Todo} from '../Actions/Todo';

const initialState = {
  todos:[],};


const handleAddTodo = (state,action) => {
  const {todos} = state;
 
  const newTodo =[...todos,{
    id: todos.length + 1,text: action.title,isComplete: false,}]
  return (
    todos.push(newTodo)
  )
}

export default function todoRDS(state = initialState,action) {
  switch (action.type) {
    case ADD_Todo:
      return handleAddTodo(state,action)
    default:
      return state
  }

}

解决方法

更改返回函数，将返回错误的值。您需要返回状态

const handleAddTodo = (state,action) => {
  const {todos} = state;
 
  return {
...state,todos: [...todos,{
    id: todos.length + 1,text: action.title,isComplete: false,}]
}
}

,

export default function todoRDS(state = initialState,action) {
  switch (action.type) {
    case ADD_TODO:
      return {...state,todos: [...state.todos,{ id: state.todos.length +1,title: action.title,isComplete: false }] }
    default:
      return state
  }

}

状态在react和redux中是不变的，您需要使用旧的状态值创建一个新状态，并在该新对象内添加新的待办事项。如果您仍然想使用handeAddTodo，请尝试以下操作：

const handleAddTodo =（状态，操作）=> { 返回{...状态，待办事项：[... state.todos，{id：state.todos.length +1，标题：action.title，isComplete：false}]} }