Question

所以我有一个减速器这样的情况：

  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（）函数中分配的任何用户，因此结果“ users”始终是一个空数组。

这是示例迭代的结果

console.log(tasks, newColumn)

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

编辑：好的，所以我在评论后发现了

// return updatedState;

它console.log记录预期的行为。为了更改它，我必须返回此状态，所以...我不知道接下来会发生什么以及为什么会发生这种情况，这完全是无法预期的。

Answer 1

您正在newState上进行映射，但未存储映射结果。因此newState.map做的工作全部丢失了。

将地图结果保存到变量中，然后返回更新后的状态。

类似的事情：

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

Answer 2

好，所以我终于弄清楚这是减速器中另一种情况的问题，在上述情况下被称为。很抱歉打扰所有试图弄清楚这个问题的人。

使用嵌套的.map（）为嵌套数组更新react redux reducer中的状态

2 个答案: