分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何将数据添加到动态创建的 redux store 数组中？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何将数据添加到动态创建的 redux store 数组中？？

开发过程中遇到如何将数据添加到动态创建的 redux store 数组中？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何将数据添加到动态创建的 redux store 数组中？的解决方法建议，希望对你解决如何将数据添加到动态创建的 redux store 数组中？有所启发或帮助；

我正在开发嵌套的 todo 应用程序，我的商店中有 todos 数组。当我调度一个动作时，将创建 {task:todo,ID:ID,singletodo:[]} 。我已经根据 ID 完成了路由，每当我点击任何待办事项时，它都会带我到那个特定的待办事项。我创建了另一个reducer，它将为主todo 添加新的sub-todo 到singletodo 数组。我尝试了各种方法，但似乎没有任何效果。我在代码段中附加代码。

减速器：

 ADD_Todo: (state,action) => {
      state.todos.push(action.payload);
    },ADD_Single_Todo: (state,action) => {
      state.todos.singletodo.push(action.payload);
    },

用于添加待办事项的调度操作：

  function handleFormsubmit(E) {
    e.preventDefault();
    dispatch(ADD_Todo({ task: tasks,ID: cuID(),singletodo: [] }));
  }

用于添加子待办事项的调度操作：

  let single = (E)=>{
    e.preventDefault();
    //todo array from store
    let alldata = useSELEctor(SELEctdata);
    //ID for main todo
    const ID = props.match.params.ID;
    alldata.map((todo) => {
      if(todo.ID === ID) {
        dispatch(ADD_Single_Todo({ task: tasks,ID: cuID() }));
      }
    })
  }

解决方法

我解决了这个问题。我在减速器和调度操作中进行了更改。

更新的减速器：

ADD_TODO: (state,action) => {
      state.todos.push(action.payload);
    },ADD_Single_TODO: (state,action) => {
        state.todos.map((todo)=>{
          if(todo.id === action.payload.id ){
            todo.singletodo.push(action.payload)
          }
        })

    },

更新的分派动作：

 let single = ()=>{
    dispatch(ADD_Single_TODO({ task: tasks,id: props.match.params.id,newid:cuid() }))
    setTasks('')
  }

在像您在这里编写的遗留 Redux 中，您不得对由 redux 管理的数据使用 .push 和其他变异函数（请参阅 https://doesitmutate.xyz/ ）。这是 redux 的三个核心原则之一（参见 https://redux.js.org/understanding/thinking-in-redux/three-principles#state-is-read-only ），并且会导致很多错误，因为 react 没有重新渲染 corerctly 等。

您将不得不编写更复杂的不可变更新逻辑，或者 - 我建议 - 遵循官方 redux 教程（在 https://redux.js.org/tutorials/essentials/part-1-overview-concepts 处）并学习现代 redux，它为您抽象了“不变性”部分并允许您还可以使用变异逻辑。