Обновите состояние в реактивном редукторе с помощью вложенных .map () для вложенных массивов.

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 () добавляет нового пользователя к конкретной задаче. Затем эти задачи (в том числе и массив) присваиваются столбцу. В результате столбцы.tasks не видят пользователей, которые были назначены во вложенной функции .map (), а в результате «пользователи» всегда представляют собой пустой массив.

Вот результат примера итерации из

console.log (tasks, newColumn)

Я хочу добавить массив 'tasks' в столбцы ', который включает в себя массив' users ', но кажется, что «пользователи» игнорируются «столбцами» без причины. Я был бы рад любой помощи в этом случае.

РЕДАКТИРОВАТЬ: ОК, поэтому я понял, что после комментирования

// return updatedState;

Это console.logs ожидаемого поведения. Я должен вернуть это состояние, чтобы изменить его, так что ... я понятия не имею, что дальше и почему это происходит, этого совершенно не следует ожидать.

Answer 1

Хорошо, так что я наконец понял, что это проблема с другим случаем в редукторе, который был вызван после упомянутого выше. Извините за беспокойство всех тех, кто пытался понять это.

Answer 2

Вы отображаете более 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;
  }