當(dāng)我按下 Flatlist 數(shù)據(jù)中的任何項目時,我正在實現(xiàn)一些清單組件,我向?qū)ο筇砑恿艘粋€切換屬性并制作它true并基于它我呈現(xiàn)了一個檢查綠色圖標(biāo),但在這種情況下,F(xiàn)latlist,而不是重新渲染,我為 Flatlist 添加了 extraData 道具并將數(shù)據(jù)傳遞給它,但效果不佳!這是代碼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} />
FlatList 不在功能組件中重新渲染?
森林海
2022-11-11 10:57:40