如何通过索引删除数组元素并更新反应本机功能组件中的道具？

Question

今天我尝试删除我的 react-native 组件中的一个数组但不起作用，这是 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 迭代上使用它，这会删除数组，但不会更新类组件中的地图迭代，它可以运行但我不明白为什么在功能组件中不起作用？有什么想法吗？谢谢你的回答

Answer 1

可变性导致了这一点。

可变是一种可以更改的变量。在 JavaScript 中，只有对象和数组是可变的，原始值不是。

您需要将其更改为：

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




Answer 2

今天我尝试删除我的 react-native 组件中的一个数组但不起作用，这是 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 迭代上使用它，这会删除数组，但不会更新类组件中的地图迭代，它可以运行

但我不明白为什么在功能组件中不起作用？有什么想法吗？谢谢你的回答await 仅在 async 中有效，就像您可以做的那样

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

}