如何在本机反应中更新数组状态？

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

            },
        ],
    });
}

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

谢谢

原文由 John 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

重要的一点是，我们不应该直接改变状态数组，总是在新数组中进行更改，然后使用 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 });

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用创建函数试试这个

onEditComparatorClicked(i) {
   let editableComparatorIndexes = [...this.state.markers];
   editableComparatorIndexes[i] = 1;
   this.setState({editableComparatorIndexes});
}

原文由 Sujal Patel 发布，翻译遵循 CC BY-SA 3.0 许可协议