React异步state影响元素条件显示：FlatList子组件选中状态不刷新

第二种写法无法正常显示选中状态的核心原因是 React Native FlatList的默认渲染优化规则：
FlatList默认仅监听data属性的变化来触发列表项的重渲染，你的选中逻辑依赖的selectedIds数组不属于data的内容，如果你没有把它加入到extraData配置项中，哪怕selectedIds的状态已经更新，FlatList也不会重新执行renderItem方法渲染子组件，Child拿到的永远是初始化时的旧selectedIds数组，自然不会更新样式和图标。

另外还有两个常见的并发诱因：

• 更新selectedIds时直接修改原数组而非返回新数组：比如使用push、pop等方法直接修改原数组后再赋值给state，此时数组的引用地址没有变化，React无法识别到状态更新。
• 若Child被React.memo包裹做性能优化，默认的浅比较逻辑只会对比数组的引用地址，若数组引用没有变化也不会触发重渲染。

1. 给FlatList添加extraData配置 #

把选中逻辑依赖的selectedIds加入extraData，告诉FlatList这个变量变化时需要重新渲染所有列表项：

<FlatList
  data={displayData}
  extraData={selectedIds} // 新增该行配置
  renderItem={({item}) => (
    <Child              
      key={item} 
      userData={item}
      id={item}
      selectedIds={selectedIds}
      selectedHandler={selectedHandler} // 无需用箭头函数额外包裹，直接传函数引用即可
    />
  )}
  keyExtractor={item => item} 
/>

2. 确保状态更新时返回全新数组 #

修改选中状态的更新逻辑，用不可变方式更新数组，保证每次状态变化都返回新的数组引用：

const selectedHandler = (id) => {
  setSelectedIds(prevIds => {
    if (prevIds.includes(id)) {
      // 取消选中：返回过滤后的新数组
      return prevIds.filter(curId => curId !== id)
    } else {
      // 新增选中：返回拼接后的新数组
      return [...prevIds, id]
    }
  })
}

3. 更优实践推荐 #

更推荐你使用第一种传isSelected布尔值的写法：

• 布尔值属于值类型，浅比较可以直接识别变化，不会出现数组引用对比的问题
• Child组件不需要关心选中逻辑的具体实现，只需要接收一个布尔值判断样式即可，组件职责更清晰，可维护性更高
• 若搭配React.memo使用，性能表现也更好

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