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

【问题标题】：FlatList not re-render in a functional component?FlatList 不在功能组件中重新渲染？
【发布时间】：2020-10-31 13:15:06
【问题描述】：

当我按下 Flatlist 数据中的任何项目时，我正在实现一些清单组件，我向对象添加了一个切换属性并使其成为 true 并基于它我呈现一个检查绿色图标，

但在这种情况下是平面列表，而不是重新渲染，我为 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;

Snack example

###编辑

我通过添加一个标志来解决它，当我选择任何项目时，该标志会发生变化，
并将其传递给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}
/>

【问题讨论】：

将刷新控件添加到 flatlist ，也许有帮助 => stackoverflow.com/questions/47570998/…
@NijatAliyev 在我的情况下我无法添加刷新控制，我解决了它检查编辑部分，让我知道你的意见！

标签： javascript reactjs react-native

【解决方案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);
  };

【讨论】：