javascript - ReactJS:如何更改对象数组中特定字段的值？

Question

constructor (props) {
    super(props)
    this.state = { items: this.props.items }
    // items props is: [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}]
}

onClick () {
    const myArray = this.state.items
    const ids = ['45', '73']
    ids.forEach((id, index) => {
        myArray.find(x => x.id === id).foo = index
    })
}

我需要改变foo值到索引值。所以结果应该是这样的

myArray = [{'id':'73','foo': 1},{'id':'45','foo': 0}]

我认为这样，我确实得到了当前值，但更改其值的语法是错误的:

myArray.find(x => x.id === '45').foo = 'new'

我确实收到错误 Uncaught TypeError: Cannot assign to read only property 'foo' of object '#<Object>'

Answer 1

您可以使用map更改您想要的属性:

const myArray = [{ id: '73', foo: 'bar' }, { id: '45', foo: 'new' }, { id: '46', foo: 'do not change me' }]

const ids = ['45', '73']

const newArr = myArray.map(item => {
  if (ids.indexOf(item.id) !== -1) {
    return {
      ...item,
      foo: 'newFooValue'
    }
  }
  
  return item
})

console.log(newArr)

还需要注意的是，直接更改对象属性(例如 myArray.find(x => x.id === '45').foo)并不是一个好的做法。

如果items处于您的状态，您可以通过以下方式简单更改它:

this.setState(prevState => ({
   items: prevState.items.map(/* same code as in the snippet above */),
}))