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

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

            },
        ],
    });
}

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

谢谢

- John

---

这个问题帮助我在状态中定义数组。谢谢@John。 - Mohamed Raza

Answer 1

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

如文档所建议：

永远不要直接改变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

---

@mori，你尝试了哪种方式？能否展示一下你的代码，这样有助于解决问题 :) - Mayank Shukla

@MayankShukla 我尝试过这个 'markers[index].key = /新值/ 'abc';'，谢谢！ - natsumiyu

关键字的名称是什么？在这里，我只将关键字引用为您想要更新的对象的任何关键字。你能展示一下你的数组吗？ - Mayank Shukla

我正在尝试相同的方法，但它显示“无法在写事务之外修改托管对象”。... 我正在开发React Native。 - Omer

@TomSawyer：扩展运算符（第一个例子）创建数组的浅拷贝。第二个例子，正如你所说，只是对现有数组的引用。 - kim3er

Answer 2

尝试使用 create 函数实现此操作。

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

- Sujal Patel

Answer 3

状态

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

更新数组

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

- Omar bakhsh

Answer 4

我正在尝试通过定义状态数组并使用map函数将值推入数组状态并设置值。

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

- Rajnikant Lodhi