React使用setState更新状态数组对象值并触发列表重渲染方案

• React Native的FlatList基于PureComponent实现，默认仅对传入的data属性做浅比较，如果你没有显式配置extraData属性绑定触发更新的状态，就算数据实际发生变化，也可能出现不触发重渲染的情况。
• 你连续两次调用setOriginalArray的写法，会被React的状态批处理机制合并。先置空数组再赋值新数组的操作，本质是靠强制变更数组引用倒逼渲染，中间存在数组为空的瞬时状态，必然会导致列表闪烁。
• 你贴出的示例代码存在语法错误：第二个数组元素{'234', randomKey: false}缺少id字段，实际运行时会导致findIndex无法正常匹配目标项。
• 原写法中直接取闭包内的randomKey值做翻转，在异步回调、批量更新场景下容易拿到旧状态值，导致更新结果不符合预期。

不需要做两次状态更新，全程遵循不可变数据原则一次性生成新状态，同时给FlatList配置正确的更新触发属性即可，从根源上解决不渲染、闪烁问题。

1. 修正状态更新逻辑 #

用函数式setState + map遍历的方式生成新数组，全程不修改原状态的任何值，保证新数组引用、被修改项的引用都是全新的，浅比较可以正常识别到变化：

// 假设状态通过useState声明：const [originalArray, setOriginalArray] = useState(initialValue)
const toggleItemRandomKey = (currentItemId) => {
  setOriginalArray(prevArray => 
    prevArray.map(item => {
      if (item.id === currentItemId) {
        // 匹配到目标项，返回全新对象，翻转布尔属性
        return {
          ...item,
          randomKey: !item.randomKey
        }
      }
      // 非目标项直接返回原引用，不做多余拷贝，兼顾性能
      return item
    })
  )
}

2. 给FlatList添加extraData配置 #

extraData是FlatList专门提供的更新触发属性，只要把会影响列表渲染的状态值传给它，FlatList就会在该值变化时自动触发重渲染：

<FlatList
  data={originalArray}
  // 关键配置：绑定状态数组，数组变化时触发重渲染
  extraData={originalArray}
  keyExtractor={item => item.id}
  renderItem={({ item }) => {
    // 你的列表项渲染逻辑
  }}
/>

方案优势 #

• 仅触发一次状态更新，不存在中间空数组的瞬时状态，完全解决闪烁问题
• 函数式更新直接基于前一刻的状态计算，不会出现闭包拿旧值导致的更新错误
• 非目标列表项不做多余拷贝，比全量深拷贝的性能更好
• 符合React状态更新的不可变原则，不会出现隐式修改状态导致的隐蔽bug

如果配置后依然存在不重渲染的问题，可以检查自定义列表项组件：如果用React.memo做了渲染优化，要保证传入列表项的props变化时，浅比较可以正常识别到差异，不要写会阻断更新的比较逻辑。

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