React Native Hooks场景下FlatList在state变化后未重新渲染问题

问题原因 #

• 数组属于JavaScript引用类型，你在selectThisInterest函数中直接对currentInterests状态数组进行push/pop原地修改，没有生成新的数组引用。React状态更新时默认做浅比较，发现传入的数组引用和旧状态完全一致，就会判定状态无变更，跳过渲染流程。
• pop()方法不接受传入参数，只会删除数组的最后一项，你写的myInterests.pop(item.id)逻辑是错误的，根本无法删除指定id的兴趣项。
• 补充：你给FlatList配置extraData={currentInterests}的操作是正确的，这部分不需要修改。

修复方案 #

直接修改selectThisInterest函数，基于原状态生成新的数组返回即可，推荐使用状态更新的回调写法避免闭包问题：

const selectThisInterest = (item) => {
  setCurrentInterests(prevInterests => {
    if (prevInterests.includes(item.id)) {
      // 过滤掉需要取消选择的id，返回全新数组
      return prevInterests.filter(id => id !== item.id)
    } else {
      // 扩展原数组，加入新的id，返回全新数组
      return [...prevInterests, item.id]
    }
  })
}

修改后状态更新时会传入新的数组引用，React可以检测到状态变化，FlatList也会根据extraData的变更触发重渲染，按钮的选中状态就会正常更新了。

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