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

Question

There is a problem that all item refresh when selectedIndex changed because the selectedIndex is dependency of renderItem . I want to manage selectedIndex to globally cause just one or none item's detail have to enabled. Is there any solution to refresh just one item that selectedIndex pointed?

Here is my code

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

Check my answer about FlatList optimization here: react native flatlist with and without pagination

In your case, you need to provide keyExtractor

Also a very useful article from the official documentation: https://reactnative.dev/docs/optimizing-flatlist-configuration