React Native中使用state修改数组元素值不生效是什么原因？

• React状态更新依赖引用变化触发重渲染：针对数组、对象这类引用类型的state，React只会做浅比较，检查变量的内存地址是否变更，不会深度对比内部元素的内容。
• 你直接修改了原data数组内部元素的属性，数组本身的引用地址没有发生改变，调用setData(data)时传入的还是原有数组引用，React判定state没有更新，不会触发组件重渲染，因此页面文本不会变化。
• 在state中存储数组是合理的常用开发方案，本身没有问题。

你需要生成全新的数组引用后再传入setData，两种常用实现示例如下：

方案1：使用map方法生成新数组 #

<Button
  title={"test"}
  onPress={() => {
    const newData = data.map((item, index) => {
      if (index === 0) {
        // 同时生成新的对象，避免修改原对象属性
        return {...item, label: "fdsfsd"}
      }
      return item
    })
    setData(newData)
  }}
/>

方案2：使用解构语法生成新数组 #

<Button
  title={"test"}
  onPress={() => {
    // 解构生成新数组
    const newData = [...data]
    // 解构生成新的目标对象，修改属性
    newData[0] = {...newData[0], label: "fdsfsd"}
    setData(newData)
  }}
/>

内容的提问来源于stack exchange，提问作者Hristo Ivanov