重要的一点是,我们不应该直接更改状态数组,而要始终在新数组中进行更改,然后使用setState更新状态值。
如 Doc 建议:
切勿直接更改this.state,将this.state视为不可变。
更新状态数组的基本流程是:
1- 首先创建状态数组的副本。
2- 查找项目的索引(如果有索引,请跳过这一步)。
3- 更新该索引处的项目值。
4- 使用setState更新状态值。
可能有多种解决方案:
1- 使用 array.map
并检查要更新的元素,当发现该元素返回具有已更新键值的对象的新对象时,否则返回相同的对象。像这样:
let newMarkers = markers.map(el => ( el.name==='name'? {...el, key: value}: el))this.setState({ markers });2- 我们还可以使用 array.findIndex
查找该特定项目的索引,然后更新该项目的值。像这样:
let markers = [...this.state.markers];let index = markers.findIndex(el => el.name === 'name');markers[index] = {...markers[index], key: value};this.setState({ markers });如果我们知道项目的索引,则不需要循环,我们可以直接编写:
let markers = [ ...this.state.markers ];markers[index] = {...markers[index], key: value};this.setState({ markers });


