如何在React Native中更新数组状态

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

谢谢

回答：

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

如 建议：

切勿直接更改this.state，将this.state视为不可变。

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

首先创建状态数组的副本。

查找项目的索引（如果有索引，请跳过这一步）。

更新该索引处的项目值。

使用setState更新状态值。

可能有多种解决方案：

使用

并检查要更新的元素，当发现该元素返回具有已更新键值的对象的新对象时，否则返回相同的对象。像这样：

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

我们还可以使用

查找该特定项目的索引，然后更新该项目的值。像这样：

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

以上是 如何在React Native中更新数组状态 的全部内容， 来源链接： utcz.com/qa/426221.html

回到顶部