如何将新对象添加到嵌套在 ReactJS 对象数组中的对象数组？

Question

I am new to ReactJS and JS and always get stuck with updating the state using object spread.

I have simplified my data as follows and consider the 0th index for the state for my example,

state = [
  {
    id: "1",
    name: "Some name",
    someNestedArrayProperty: [
      {
        id: "1",
        name: "Name 1"
      },
      {
        id: "2",
        name: "Name 2"
      }
    ]
  },
 {...}
]

I want to add a newObject into someNestedArrayProperty that I receive from action creator, say

 newObject = {
        id: "3",
        name: "Name 3"
      }

I am not getting the correct syntax. I tried the following and it is messing up the state. Below is the simplified code of what I am trying to do in my application,

  let someNestedArrayProperty= [
    ...state[0].someNestedArrayProperty,
    action.someNestedArrayProperty
  ];
  return [
    {
      ...state,
      [0]: {  //I guess the problem is in this line "[0]", but I am not getting the correct syntax
        ...state[0],
        someNestedArrayProperty: someNestedArrayProperty
      }
    }
  ];

Note: I am returning the modified state from the Redux reducer

Answer 1

You can use map function to modify your state like following:

const newState = state.map((s, idx) => {

    // Modification needed elemet
    if (idx === 0) {
        return {
            ...s,
            someNestedArrayProperty: someNestedArrayProperty
        }
    }
    // Modification not needed
    else {
        return s;
    }

})