在 Scroll 上反应本机 FlatList 显示

Question

我正在制作一个平面列表，其中我在用户滚动条上显示信息。 但我不知道为什么会出现此错误：

错误警告：遇到两个使用相同密钥4的孩子。 密钥应该是唯一的，以便组件在更新期间保持其身份。 非唯一键可能会导致子项被重复和/或省略——这种行为不受支持，可能会在未来的版本中改变。

我真的不知道为什么我会得到一些“密钥重复”。 有我的代码：

 const getProducts = (itemId, check, multiSliderValue, offset) => {
    return new Promise((resolve, reject) => {
      dispatch(
        authAction.GetAllProducts(
          itemId,
          check,
          brand,
          multiSliderValue,
          offset
        )
      ).then((response) => {
        // faites une copie de la liste de données avant de l'utiliser comme source pour l'opérateur de décomposition
        const updatedList = [...informations];
        let counter = informations.length;
        const newArray = response.array.map((item) => ({
          ...item,
          key: counter++, // utilisez un compteur incrémental comme clé unique
        }));
        if (newArray.length > 0) {
          setInformations([...updatedList, ...newArray]);
          setOffset(offset + 5);
        }
        setIsLoading(false);
        resolve(newArray);
      });
    });
  };

 const loadMoreData = () => {
    if (isLoading) {
      return; // empêche les appels multiples à la fonction de chargement de données
    }

    console.log(itemId, check, multiSliderValue, offset + 5);
    setIsLoading(true);
    getProducts(itemId, check, multiSliderValue, offset)
      .then((response) => {
        if (response) {
          // mettez à jour votre liste de données avec les nouvelles données
          setInformations([...informations, ...response]);
          // mettez à jour l'offset
          setOffset(offset + 5);
        } else {
          console.log("NO RESPONSE");
        }
      })
      .catch((error) => {
        console.log("error: ", error);
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

有我的 FLatlist：

<FlatList
          onEndReachedThreshold={0.5}
          onEndReached={loadMoreData}
          ListFooterComponent={isLoading ? <ActivityIndicator /> : null}
          style={{top: "2%"}}
          data={informations}
          renderItem={({item}) => (
            <View style={styles.Products}>
              <TouchableOpacity
                onPress={() =>
                  navigation.navigate("descriptionProduct", {
                    data: item,
                  })
                }
              >
                <View style={{width: "40%", height: "60%"}}>
                  <Image
                    style={styles.imageProduct}
                    source={{uri: item.image_url}}
                  />
                </View>
                <View style={styles.productInfos}>
                  <View style={{width: "60%", height: "30%"}}>
                    <Text
                      style={{
                        fontSize: 15,
                        bottom: "340%",
                      }}
                    >
                      {item.titre}
                    </Text>
                  </View>
                  <View
                    style={{
                      display: "flex",
                      flexDirection: "row",
                      bottom: "1%",
                    }}
                  >
                    <Text style={{color: "grey"}}>à partir de </Text>
                    <Text style={styles.price}>{item.prix} €</Text>
                    <Text style={{left: "50%", color: "grey"}}>
                      {item.boutiqueCpt} offres
                    </Text>
                  </View>
                </View>
              </TouchableOpacity>
            </View>
          )}
        />
      )}

在页面的开头，我使用了这个钩子：

  useEffect(() => {
    if (isLoading) {
      return; // empêche les appels multiples à la fonction de chargement de données
    }

    getBrands(itemId);
    getProducts(itemId, check, multiSliderValue, offset);
    setIsLoading(true);
  }, [dispatch]);

我搜索了好几个小时，但没有找到解决方案，所以如果有人可以向我解释。 提前谢谢你。

Answer 1

它抱怨是因为您使用的密钥有时是相同的。 然而，在代码块中，我并没有真正看到您使用密钥。 请注意，密钥在内部用于某些优化。 有关如何添加密钥的更多详细信息，请参阅文档。 简而言之，添加密钥提取器方法，该方法将返回您的项目的唯一标识符

(item: object, index: number) => string;

反应本机文档

不确定这是否是整个代码，但如果您在考虑添加它时呈现的项目具有唯一值，这应该会阻止警告的发生。

Answer 2

将此添加到平面列表：

keyExtractor={(item, index) => item.key} //here key should be in your information which is unique for each data item in the information

要么

keyExtractor={(item, index) => index}

Answer 3

您可以使用它在末尾添加一个 toString 。

keyExtractor={(item, index) => item.id.toString()}