第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

森林海 2022-11-11 10:57:40
當(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}      />
查看完整描述

1 回答

?
海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗 獲得超8個贊

發(fā)生這種情況是因為您使用的是相同的數(shù)組。如果您像下面這樣更改代碼,這將正常工作。


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

  };


查看完整回答
反對 回復(fù) 2022-11-11
  • 1 回答
  • 0 關(guān)注
  • 132 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號