javascript - Flatlist 在 React Native 中三次渲染映射数据

Question

我一直在使用 map 函数在我的 React Native 应用程序中使用 Flatlist 呈现数据。但是由于某种原因，相同的数据被渲染了三次。这是我现在拥有的：

    renderItem = ({ item, index }) => {
        if (item === null) return <View key="post_" />;
        const imageURI = this.props.categories;
        const mainCategories = imageURI.filter(
            category => category.parent === 0
        );
        return mainCategories.map((data) => {
            return (
                <TouchableOpacity
                  activeOpacity={0.9}
                  style={[styles.panelTwo]}
                  onPress={() => this.onRowClickHandle(item)}
                >
                 <ImageCache uri={data.image === null ? Images.defaultPayment : data.image.src} key={data.id} style={styles.imagePanelTwo} />
                 <Text numberOfLines={1} style={styles.nameTwo}>
                  {data.name}
                 </Text>
                </TouchableOpacity>
            );
        })
    };
  
    render() {
        const {categories,showSorting} = this.props;
        const mainCategories = this.props.categories.filter(
            category => category.parent === 0
        );
        return (
          <View>
           <View style={[styles.flatWrap]}>
            <FlatList
              contentContainerStyle={styles.flatlist}
              data={mainCategories}
              keyExtractor={item => `post__${item.id}`}
              renderItem={this.renderItem}
              showsHorizontalScrollIndicator={false}
              horizontal
            />
          </View>
        </View>
        );
    }
}

我无法弄清楚为什么在这种情况下相同的数据会渲染三次。mainCategories 也是这样的：

除了它显示了三遍。

Answer 1

假设您的数据数组是[1, 2, 3]. 在这种情况下，FlatList 将遍历它并一一呈现它们，看起来像：

<Text>1</Text>
<Text>2</Text>
<Text>3</Text>

但是在renderItem你再次循环并说，为每一行渲染整个数组，你的结果是：

<Text>1</Text>
<Text>2</Text>
<Text>3</Text>

<Text>1</Text>
<Text>2</Text>
<Text>3</Text>

<Text>1</Text>
<Text>2</Text>
<Text>3</Text>

Answer 2

改变

    renderItem = ({ item, index }) => {
        if (item === null) return <View key="post_" />;
        const imageURI = this.props.categories;
        const mainCategories = imageURI.filter(
            category => category.parent === 0
        );
        return mainCategories.map((data) => {
            return (
                <TouchableOpacity
                  activeOpacity={0.9}
                  style={[styles.panelTwo]}
                  onPress={() => this.onRowClickHandle(item)}
                >
                 <ImageCache uri={data.image === null ? Images.defaultPayment : data.image.src} key={data.id} style={styles.imagePanelTwo} />
                 <Text numberOfLines={1} style={styles.nameTwo}>
                  {data.name}
                 </Text>
                </TouchableOpacity>
            );
        })
    };

至

    renderItem = ({ item }) => {
        if (item === null) return <View key="post_" />;
        const onPressItem = () => this.onRowClickHandle(item)
        return (
            <TouchableOpacity
              activeOpacity={0.9}
              style={styles.panelTwo}
              onPress={onPressItem}
            >
             <ImageCache uri={data.image?.src || Images.defaultPayment} key={data.id} style={styles.imagePanelTwo} />
             <Text numberOfLines={1} style={styles.nameTwo}>{data.name}</Text>
           </TouchableOpacity>
        );
    };