Redux state 插入嵌套数组后消失

Question

When trying to insert into my redux state, my state disappears,. I am checking to see if I have a parentId and if I do, I insert into the parents id children array, but if no parent id is provided, I simply insert the payload into the array. The last part works fine, the problem is with adding to the child array: Here is my codeL:

 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

The first condition within CREATE_CATEGORY case, doesn't really return anything. You can try using the same approach you've already done in the second condition, ie:

[
  ...(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: [],
            },
          ];
        }
      }))
  ]

Final code:

 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; } };

Update

From the code, I assume there has been a mixed up between parent and children iteration. If a parent is an array of an object containing children property, then you would do:

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