插入嵌套数组后 Redux 状态消失

Question

当尝试插入我的 redux 状态时，我的状态消失了。我正在检查我是否有 parentId，如果有，我将插入到父 id 子数组中，但如果没有提供父 id，我只是将有效负载插入到数组中。最后一部分工作正常，问题在于添加到子数组：这是我的代码L：

export default (categories = [], action) => {
  switch (action.type) {
    case 'GET_ALL_CATEGORIES':
      return action.payload;
      // I am having a problem with the case below
    case 'CREATE_CATEGORY':

      return action.payload.parentId
        ? categories.map((category) => {
            if (
              category._id.toString() === action.payload.parentId.toString()
            ) {
              return [
                ...category.children,
                {
                  _id: action.payload._id,
                  name: action.payload.name,
                  slug: action.payload.slug,
                  children: [],
                },
              ];
            } else {
              return [
                {
                  _id: action.payload._id,
                  name: action.payload.name,
                  slug: action.payload.slug,
                  children: [],
                },
              ];
            }
          })
        : [
            ...categories,
            {
              _id: action.payload._id,
              name: action.payload.name,
              slug: action.payload.slug,
              children: [],
            },
          ];
    default:
      return categories;
  }
};

Answer 1

CREATE_CATEGORY 案例中的第一个条件实际上 return 没有任何意义。您可以尝试使用与第二种情况相同的方法，即：

[
  ...(categories.map((category) => {
        if (
          category._id.toString() === action.payload.parentId.toString()
        ) {
          return [
            ...category.children,
            {
              _id: action.payload._id,
              name: action.payload.name,
              slug: action.payload.slug,
              children: [],
            },
          ];
        } else {
          return [
            {
              _id: action.payload._id,
              name: action.payload.name,
              slug: action.payload.slug,
              children: [],
            },
          ];
        }
      }))
  ]

最终代码：

export default (categories = [], action) => {
  switch (action.type) {
    case 'GET_ALL_CATEGORIES':
      return action.payload;
      // I am having a problem with the case below
    case 'CREATE_CATEGORY':

      return action.payload.parentId
        ? [
            ...(categories.map((category) => {
            if (
              category._id.toString() === action.payload.parentId.toString()
            ) {
              return [
                ...category.children,
                {
                  _id: action.payload._id,
                  name: action.payload.name,
                  slug: action.payload.slug,
                  children: [],
                },
              ];
            } else {
              return [
                {
                  _id: action.payload._id,
                  name: action.payload.name,
                  slug: action.payload.slug,
                  children: [],
                },
              ];
            }
          }))
        ]
        : [
            ...categories,
            {
              _id: action.payload._id,
              name: action.payload.name,
              slug: action.payload.slug,
              children: [],
            },
          ];
    default:
      return categories;
  }
};

更新

根据代码，我假设父子迭代之间存在混淆。如果父对象是包含 children 属性的对象数组，那么您将执行：

 return {
    ...category,
    children: [
       ...category.children,
       {
              _id: action.payload._id,
              name: action.payload.name,
              slug: action.payload.slug,
              children: [],
       },
    ]
 }

插入嵌套数组后 Redux 状态消失

Redux state disappears after inserting into a nested array

javascript

reactjs

redux

redux-thunk