如何在反应中修复状态更新？

Posted 2023-02-19

【中文标题】如何在反应中修复状态更新？

【英文标题】：How to fix state updating in react?

【发布时间】：2022-01-16 15:47:41

【问题描述】：

我使用little state machine 进行状态管理。我有以下状态

export const todoState =  todoList: []   

现在我使用动作类似的动作来调用它

export const updateTodoList = (state, payload) => 
    return 
        ...state,
        toDoList: 
            ...state.toDoList,
            ...payload
        
    

调用此操作

 updateToDoList( id: '1', text:'11', isComplete: 'false )

但动作仍然不会更新 toDoList 的数组，也不会考虑以前的值。

任何人都可以帮助我更新操作代码吗？谢谢。

【问题讨论】：

错字，toDoList 与 todoList。您将状态声明为 todoList 并将属性更新为 toDoList

是的，但是在动作逻辑中，有什么问题吗？

todoList 是数组而不是对象

是的，如果我从那里删除了 ，那么它会显示 react-dom.development.js:4091 Uncaught TypeError: payload is not iterable

动作函数中的状态对象是什么样的？ console.log(state) 在 return 语句之前。了解对象的确切结构是如何操作它的关键。

【参考方案1】：

1) 打字错误：todoList 而不是 toDoList

2) todoList 是一个数组而不是一个对象。所以把它展开成一个数组。

3)既然你传递的是一个对象，所以不需要传播它

export const updateTodoList = (state, payload) => 
  return 
    ...state,
    todoList: [
      ...state.todoList,
      payload,        // It will add the payload object into todoList
    ],
  ;
;

【讨论】：

嘿@decpk 谢谢你。不知道为什么现在说 state.todoList 不可迭代

只是想更新一下，我已经声明了类似 export const todoList = todoList: []

的状态