如何在react原生函数组件中通过索引删除数组元素并更新props

Question

今天我试图删除我的react原生组件中的一个数组，但没有成功，下面是mi代码：

let arr = buques
await arr.splice(index, 1)
await setBuques(arr)
console.log(buques)
alert('Buque eliminado')

这可以在类组件中运行并更新道具：

removearray = (index)=>{
let arr = this.state.tags
arr.splice(index, 1)
this.setState({tags: arr})
}

我在函数组件中的.map迭代中使用它，这删除了数组，但不更新类组件中的map迭代，这可以运行

但我不明白为什么不在功能组件中工作？有什么想法吗？谢谢你的回答

Answer 1

可突变性导致这种情况。

Mutable是一种可以更改的变量类型。在JavaScript中，仅对象和数组是可变的，而不是基元值。源

您需要将其更改为：

await setBuques(await buques.filter((el, i) => (i === index)))
console.log(buques)

Answer 2

await只在异步中有效，就像一样

const removeItem = async () => {
let arr = buques
await arr.splice(index, 1)
await setBuques(arr)
console.log(buques)
alert('Buque eliminado');
} 

要更新视图中的数组，您需要更改数组数据的引用，如

removearray = (index)=>{
let arr = [...this.state.tags]; <-- This is trick -->
arr.splice(index, 1)
this.setState({tags: arr})
}