如何实现React Native中点击FlatList子项时重新渲染列表数据

• 你定义的data是普通JS常量，不属于React的响应式状态，修改后无法触发组件重渲染
• 直接修改原item对象的属性不符合React状态不可变的更新规范，FlatList通过浅比较判断是否需要刷新，检测不到原数组内部对象的属性变化，因此不会重新渲染列表。

// 首先引入需要的API
import { useState } from 'react';
import { FlatList, TouchableOpacity, Text } from 'react-native';

// 组件内代码
// 将数据存入响应式状态
const [data, setData] = useState([
  {
    id: 1,
    title: 'First Item',
    isShow: 0
  },
  {
    id: 2,
    title: 'Second Item',
    isShow: 0
  }
])
       
const renderItem = ({ item }) => {
  return (
    <TouchableOpacity onPress={() => onPress(item)}>
      {/* 示例：isShow为1时文字变红，验证渲染效果 */}
      <Text style={{ color: item.isShow ? 'red' : '#000' }}>{item.title}</Text>
    </TouchableOpacity>
  );
};

const onPress = (clickItem) => {
  // 遵循不可变原则更新状态，生成全新数组与修改后的对象
  setData(prevData => 
    prevData.map(item => 
      item.id === clickItem.id ? {...item, isShow: 1} : item
    )
  )
}

// 渲染FlatList，添加extraData确保状态变化能被检测到
<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={item => item.id.toString()}
  extraData={data}
/>

extraData属性是FlatList用来标记额外的变化依赖的属性，如果你的列表渲染依赖data之外的状态变量，需要把该变量传入extraData，否则FlatList不会触发重渲染。本次方案中我们直接修改了data本身，传入extraData属于冗余但更稳妥的写法。

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