Question

我正在制作一个将任务分配给学习方法的应用程序。归约器之一应更改任务标记的状态：根据任务的解决方案传递true或false。但是这段代码不会改变reducer的状态。

我的代码：


const initialStateMethods = {
  array: methodsObject
};

const methods = (state = initialStateMethods, action) => {
  switch (action.type) {
    case "CHANGE_MARK":
      return {
        ...state,
        array: state.array.map(method => {
          if (method.id === action.methodIndex) {
            method.tasks.map(task => {
              if (task.id === action.taskIndex) {
                return { ...task, mark: action.mark };
              } else {
                return task;
              }
            });
          }
          return method;
        })
      };

    default:
      return state;
  }
};

但是该方法的值很容易更改并且可以工作。示例：

const methods = (state = initialStateMethods, action) => {
  switch (action.type) {
    case "CHANGE_MARK":
      return {
        ...state,
        array: state.array.map(method => {
          if (method.id === action.methodIndex) {
            return { ...method, name: "newName" };

          }
          return method;
        })
      };

    default:
      return state;
  }
};

所以我认为问题出在多层结构中

一小块原始对象：

export const methodsObject = [
  {
    name: "from()",
    id: 0,
    tasks: [
      {
        taskName: "Task №1",
        id: 0,
        mark: null
      },
      {
        taskName: "Task №2",
        id: 1,
        mark: null
      }
    ]
  }

Answer 1

您在地图循环调用旁边缺少返回语句：

...
case "CHANGE_MARK":
  return {
    ...state,
    array: state.array.map(method => {
      if (method.id === action.methodIndex) {
        return method.tasks.map(task => {
          if (task.id === action.taskIndex) {
            return { ...task, mark: action.mark };
          } else {
            return task;
          }
        });
      }
      return method;
    })
  };

如何在Redux Reducer中解决第二层条件的问题？

1 个答案: