首页 > 解决方案 > 使用嵌套 .map() 为嵌套数组更新 react redux reducer 中的状态

问题描述

所以我有一个这样的减速机案例:

  if (type === "user") {
    const user = users.find((user) => user._id === draggableId);
    const updatedState = newState.map((column) => {
      let tasks = column.tasks.map((task) => {
        if (task.id === droppableIdEnd) {
          return {
            ...task,
            users: [...task.users, user],
          };
        } else return task;
      });
      let newColumn = {
        ...column,
        tasks: tasks,
      };
      console.log(tasks, newColumn);
      return newColumn;
    });
    console.log(updatedState);
    return updatedState;
  }

现在您可以看到嵌套的 .map() 函数将新用户添加到特定任务。然后将这些任务(以及数组)分配给一列。结果是 columns.tasks 看不到任何在嵌套 .map() 函数中分配的用户,结果“用户”始终是一个空数组。

这是示例迭代的结果

console.log(任务,新列)

我想将 'tasks' 数组添加到包含 'users' 数组的 'columns' 中,但似乎 'users' 被 'columns' 无缘无故地忽略了。在这种情况下,我很乐意提供任何帮助。

编辑:好的,所以我在评论后发现

// return updatedState;

它 console.logs 预期的行为。为了改变它,我必须返回这个状态,所以......我不知道接下来会发生什么以及为什么会发生这种情况完全出乎意料。

标签: reactjsredux

解决方案


好的,所以我终于发现这是减速器中另一个案例的问题,该案例是在上述案例之后调用的。很抱歉打扰所有试图解决这个问题的人。


推荐阅读