FlatList 不在功能组件中重新渲染？

Question

当我按下 Flatlist 数据中的任何项目时，我正在实现一些清单组件，我向对象添加了一个切换属性并制作它true并基于它我呈现了一个检查绿色图标，但在这种情况下，Flatlist，而不是重新渲染，我为 Flatlist 添加了 extraData 道具并将数据传递给它，但效果不佳！这是代码import React, {useState} from 'react';import {StyleSheet, Text, View, FlatList, TouchableOpacity} from 'react-native';import Feather from 'react-native-vector-icons/Feather';import {Theme} from '../utils/colors';const Data = [  {    id: 1,    first_name: 'Sile',  },  {    id: 2,    first_name: 'Clementia',  },  {    id: 3,    first_name: 'Brita',  },  {    id: 4,    first_name: 'Duke',  },  {    id: 5,    first_name: 'Hedvig',  }];const BottomModal = () => {  const [countries, setCountries] = useState(Data);  const itemSelected = (id) => {    console.log('current id: ', id);    let datamanipulat = countries;    datamanipulat.map((item) => {      item.toggle = false;      if (item.id === id) {        item.toggle = true;      }    });    setCountries(datamanipulat);    console.log('data after manipulate: ', countries);  };  return (    <View style={styles.container}>      <FlatList        ListHeaderComponent={() => (          <View style={styles.header}>            <View style={styles.panelHandle} />          </View>        )}        showsVerticalScrollIndicator={false}        data={countries}        extraData={countries}        keyExtractor={(item) => String(item.id)}        renderItem={({item, index}) => (          <TouchableOpacity            key={item.id}            onPress={() => itemSelected(item.id)}            style={styles.item}>            <Text>{`country: ${item.first_name}`}</Text>            {item.toggle ? (              <Feather name="check" size={25} color={Theme.PrimaryColor} />            ) : (              <Feather name="octagon" size={25} color={Theme.PrimaryColor} />            )}          </TouchableOpacity>        )}        contentContainerStyle={styles.contentContainerStyle}      />

Answer 1

发生这种情况是因为您使用的是相同的数组。如果您像下面这样更改代码，这将正常工作。

  const itemSelected = (id) => {

    console.log('current id: ', id);

    const updated = countries.map((item) => {

      item.toggle = false;

      if (item.id === id) {

        item.toggle = true;

      }

      return item;

    });

    setCountries(updated);

    console.log('data after manipulate ++: ', updated);

  };