ReactJS中嵌套地图中断原点对象结构上的setState

Question

I have an array of objects, and I want to add/change a new property given it matches type and key .

[
  {
    "type": "a",
    "units": [
      {
        "key": "keyofba"
      },
      {
        "key": "mytargetkey"
      }
    ]
  },
  {
    "type": "b",
    "units": [
      {
        "key": "keyofb"
      }
    ]
  },
  {
    "type": "ab",
    "units": [
      {
        "key": "mytargetkey"
      }
    ]
  }
]

I tried this

this.setState({
  schema: schema.map(s => {
    if (s.type === 'a' || s.type === 'ab') { //hardcord for testing
      return s.units.map(unit => {
        if (unit.key === 'mytargetkey') {
          return {
            ...unit,
            newProp: 'newProp value'
          }
        } else {
          return { ...unit }
        }
      })
    } else {
      return { ...s }
    }
})

But somehow it doesn't work, I think I missed something, need spotter.

Answer 1

That's because you have to return the list modified inside the new object, and if not it the target, return the element as is:

schema.map(s => {
    if (s.type === 'a' || s.type === 'ab') { //hardcord for testing
       return {...s, units: s.units.map(unit => {
            if (unit.key === 'mytargetkey') {
              return {
                ...unit,
                newProp: 'newProp value'
              }
            } else {
              return unit
            }
          })}
    } else {
      return s
    }
})