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

IT技术 reactjs react-native
2021-03-29 12:45:47

我正在尝试仅更新数组状态中的一个元素，但我不确定如何进行。

状态

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

            },
        ],
    });
}

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

谢谢

4个回答

重要的一点是，我们不应该直接改变状态数组，总是在新数组中进行更改，然后使用 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 });
@MayankShukla 我试过这个 'markers[index].key = /*new value*/ 'abc';' 谢谢！
2021-05-31 12:45:47
键的名称是什么，在这里我只是将键引用为您要更新的对象的任何键。你能显示你的数组吗？
2021-06-16 12:45:47
我试过这个，但我有undefined is not an object (evaluating 'cd[i].val = text')如何解决这个问题？这是我的问题stackoverflow.com/questions/43197537/……谢谢
2021-06-17 12:45:47
@mori 你试过哪种方式，你能展示你的代码吗，会帮助你:)
2021-06-19 12:45:47
这不是一个好方法@MayankShukla，这应该始终基于密钥来完成。
2021-06-20 12:45:47

试试这个使用创建功能

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

状态

this.state = {
          barcodeArray:['']
        };

更新数组

var barcode_text='hi';
 this.setState({ barcodeArray:[...this.state.barcodeArray,barcode_text] })}

我试图在数组状态中推送值并设置这样的值，并通过映射函数定义状态数组和推送值。

 this.state = {
        createJob: [],
        totalAmount:Number=0
    }


 your_API_JSON_Array.map((_) => {
                this.setState({totalAmount:this.state.totalAmount += _.your_API_JSON.price})
                this.state.createJob.push({ id: _._id, price: _.your_API_JSON.price })
                return this.setState({createJob: this.state.createJob})
            })
其它你可能感兴趣的问题
上一篇如何从 React 访问样式？ 下一篇NPM - 无法替换配置中的 env：${NPM_TOKEN}