渲染后如何在不刷新 React Native 上的其他项目的情况下更改 FlatList 项目的 state

Question

有一个问题，当selectedIndex更改时所有项目都刷新，因为selectedIndex是renderItem的依赖项。 我想管理 selectedIndex 以在全局范围内导致只启用一个项目的详细信息或不启用任何项目的详细信息。 有什么解决方案可以只刷新selectedIndex指向的一项吗？

这是我的代码

interface ItemType {
  title: string;
  detail: string;
}

const FlatListTestScreen = () => {
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);

  const data: ItemType[] = [
    { title: 'title1', detail: 'detail1' },
    { title: 'title2', detail: 'detail2' },
    { title: 'title3', detail: 'detail3' },
    { title: 'title4', detail: 'detail4' },
    { title: 'title5', detail: 'detail5' },
  ];

  const renderItem = useCallback<ListRenderItem<ItemType>>(
    ({ item, index }) => {
      console.log('render', index, selectedIndex === index);
      return (
        <Pressable
          onPress={() => {
            console.log('press', index);
            setSelectedIndex(index === selectedIndex ? null : index);
          }}>
          <Text>{item.title}</Text>
          {selectedIndex === index && <Text>{item.detail}</Text>}
        </Pressable>
      );
    },
    [selectedIndex],
  );

  return <FlatList data={data} renderItem={renderItem} />;
};

 LOG  render 0 false
 LOG  render 1 false
 LOG  render 2 false
 LOG  render 3 false
 LOG  render 4 false
 LOG  press 1
 LOG  render 0 false <- unnecessary render
 LOG  render 1 true
 LOG  render 2 false <- unnecessary render
 LOG  render 3 false <- unnecessary render
 LOG  render 4 false <- unnecessary render

Answer 1

在这里查看我关于 FlatList 优化的回答： react native flatlist with and without pagination

在您的情况下，您需要提供keyExtractor

还有一篇来自官方文档的非常有用的文章： https://reactnative.dev/docs/optimizing-flatlist-configuration