如何在本机中更新阵列状态？

Question

我试图只更新数组状态中的一个元素,但我不知道如何做到这一点.

州

constructor(props) {
    super(props);
    this.state = {
        markers: [],
    };
} 

设置状态

 setCurrentLocation() {
    var root = this;
    root.setState({
        markers: [
            ...root.state.markers,
            {
                coordinate: {
                    latitude: parseFloat(root.state.currentLat),
                    longitude: parseFloat(root.state.currentLon)
                },
                key: root.state.currentLat,
                image: pinCurrentLocation

            },
        ],
    });
}

如果我想更改标记的第四个元素中的键,我该怎么做？

谢谢

Answer 1

重要的是,我们不应该直接改变状态数组,总是在新数组中进行更改然后使用setState来更新状态值.

正如Doc所建议的:

永远不要直接改变this.state,将this.state视为不可变.

更新状态数组的基本流程是:

1-首先创建状态数组的副本.

2-查找项目的索引(如果索引可用,则跳过此项目).

3-更新该索引处的item值.

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