如何在reactnative中更新数组状态

发布于02月04日

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

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

            },
        ],
    });
}

如果我想改变marker第四个元素的键，我该怎么做？

谢谢

推荐答案

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

正如100所建议的:

永远不要改变这个.直接陈述，处理这个.说得好像是

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

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

React-native相关问答推荐

try 使用JWT-DECODE解码令牌时出错

axios 在react native 中给出 [AxiosError： Network Error]

如何在 React / React Native 中使用 Emscripten 编译的 JavaScript

在 ReactNative 中调用 RCTDeviceEventEmitter.emit 时出错

Jest 遇到了带有 react-native 的意外令牌

React - 类内的useContext

React-Native：save user preferences

是否可以在 React Native 中隐藏BugReporting extraData？

如何判断 goBack() 函数在react-navigation 中是否可行？

React 中的 getSnapshotBeforeUpdate() 是什么？

试图注册两个具有相同名称 ProgressBarAndroid 的视图

null 不是对象(判断 this.state.count)

如何使用功能组件向 ref 公开功能？

react-native createbottomtabnavigator 隐藏标签栏标签

如何在 React Native 中创建对角线边框？

使用 WSL2 运行时如何将手机连接到 expo

设置 react-native 元素时使用特定的包名称

在 ReactNative 中单击按钮时如何获取 TextInput 中的值

键盘可见时无法单击按钮

react-native 开始给出 Invalid 正则表达式无效错误

实用课程推荐