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

Question

當我按下 Flatlist 數據中的任何項目時，我正在實現一些清單組件，我向 object 添加了一個切換屬性並使其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}
      />
      <TouchableOpacity style={styles.doneBtn}>
        <Text style={styles.doneText}>Done</Text>
      </TouchableOpacity>
    </View>
  );
};
export default BottomModal;

小吃示例

＃＃＃編輯

我通過添加一個標志來解決它，該標志會在我 select 任何項目時發生變化，
並將其傳遞給extraData ，如果有其他解決方案，請告訴我！

像這樣

....
  const [itemChecked, setItemChecked] = useState(false);


 const itemSelected = (id) => {
    countries.map((item) => {
      item.toggle = false;
      if (item.id === id) {
        item.toggle = true;
        setItemChecked((prevState) => !prevState);
      }
    });
    setCountries(countries);
  };

...

 <FlatList
       ...
        extraData={itemChecked}
/>

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);
  };