如何在本机反应中更新数组状态? [英] How to update array state in react native?

问题描述

我试图只更新数组状态中的一个元素，但我不确定如何去做.

状态

构造函数(道具){超级(道具)；this.state = {标记:[]，};}

设置状态

 setCurrentLocation() {var root = this;root.setState({标记: [...root.state.markers，{协调: {纬度:parseFloat(root.state.currentLat)，经度:parseFloat(root.state.currentLon)},关键:root.state.currentLat，图片:pinCurrentLocation},],});}

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

谢谢

解决方案

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

正如 Doc 所建议的::<块引用>

永远不要直接改变 this.state，把 this.state 当作是不可变.

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

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

2- 查找项目的索引(如果索引可用，跳过这一项).

3- 更新项目在该索引处的值.

4- 使用 setState 更新状态值.

<小时>

可能有多种解决方案:

1- 使用 array.map 并检查您要更新哪个元素，当您发现该元素返回一个具有更新键值的新对象时，否则只返回相同的对象.像这样:

let newMarkers = marker.map(el => (el.name==='名字'?{...el，键:值}:el))this.setState({ 标记 });

2- 我们也可以使用 array.findIndex 以查找该特定项目的索引，然后更新该项目的值.像这样:

let 标记 = [...this.state.markers];让 index =markers.findIndex(el => el.name === 'name');标记[索引] = {...标记[索引]，键:值}；this.setState({ 标记 });

如果我们知道项目的索引就不需要循环，我们可以直接写:

let 标记 = [ ...this.state.markers ];标记[索引] = {...标记[索引]，键:值}；this.setState({ 标记 });

I am trying to update only one element in an array state but i am not sure of how to do it.

State

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

Setting the state

 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

            },
        ],
    });
}

If i want to change the key in the fourth element of marker, how do i do that?

Thanks

解决方案

Important point is, we should not mutate the state array directly, always do the changes in new array and then use setState to update the state value.

As suggested by Doc:

Never mutate this.state directly, Treat this.state as if it were immutable.

Basic flow of updating a state array is:

1- First create the copy of state array.

2- Find index of the item (if index is available skip this one).

3- Update the value of item at that index.

4- Use setState to update the state value.

---

Multiple solutions are possible:

1- Use array.map and check which element you want to update, when you find that element return a new object for that with updated key value otherwise just return the same object. Like this:

let newMarkers = markers.map(el => (
      el.name==='name'? {...el, key: value}: el
))
this.setState({ markers });

2- We can also use array.findIndex to find the index of that particular item, then update the values of that item. Like this:

let markers = [...this.state.markers];
let index = markers.findIndex(el => el.name === 'name');
markers[index] = {...markers[index], key: value};
this.setState({ markers });

Loop will be not required if we know the index of the item, directly we can write:

let markers = [ ...this.state.markers ];
markers[index] = {...markers[index], key: value};
this.setState({ markers });

这篇关于如何在本机反应中更新数组状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！