渲染 React-native flatList 的问题答案

【问题标题】：issue with rendering the React-native flatList渲染 React-native flatList 的问题
【发布时间】：2021-05-02 23:47:39
【问题描述】：

下午好 StackOverflowers 我正在构建一个 RssFeeder 应用程序以提高我的 React Native 技能，但不知何故遇到了一个我现在想解决的问题，因为我尝试渲染从外部获取的对象API 称为 newsAPI，我尝试将它们显示到一个 flatList 中，由于某种原因它不能像我希望的那样工作；这是我的平面列表的主屏幕部分：

 return (
    <View>
      <Text>We have found {articles?.length} articles</Text>
      <FlatList
        data={articles}
        showsHorizontalScrollIndicator={false}
        horizontal
        scrollEnabled
        keyExtractor={(articles) => articles?.name}
        extraData={articles} 
        renderItem={({ item }) => {
          return (
            <TouchableOpacity onPress={() => navigation.navigate("Detail")}>
              <DetailScreen result={item} />
            </TouchableOpacity>

         
          );
        }}
      ></FlatList>

我很确定 API 可以正常工作，因为显示文章长度的第一行显示了确切的数字，此外，我在 <DetailScreen result={item} /> 之后添加了一个 Text 组件，它向我显示了 Text 组件 10 次，所以我想知道代码有什么问题。

<DetailScreen result={item} /> 中的

result 是我的第二个名为“DetailScreen”的屏幕的虚构道具，用于将所有数据从 Home 传送到 DetailScreen。

另外，这就是 DetailScreen 目前的样子。

import React from "react";
import { Text, View, StyleSheet } from "react-native";
import HomeScreen from "./HomeScreen";

const DetailScreen = (result) => {
  return (
    <View>
      <Text>{result.title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({});

export default DetailScreen;

这是来自 API 的示例：

{ “来源”： { “id”：“技术紧缩”， “名称”：“TechCrunch” }, “作者”：“乔纳森·希伯”， "title": "亚特兰大是如何成为东南部十亿美元创业公司的顶级温床的？", “描述”：“在过去的五年里，以亚特兰大为首的东南部地区已经从科技界“保守得最好的秘密之一”变成了一个充满活力的生态系统，拥有一群价值数十亿美元的科技企业。在投资界被称为“联合国……”， “网址”：“https://techcrunch.com/2021/05/02/how-did-atlanta-become-a-top-breeding-ground-for-billion-dollar-startups-in-the-southeast/” , "urlToImage": "https://techcrunch.com/wp-content/uploads/2018/06/GettyImages-467404053.jpg?w=600", “发布时间”：“2021-05-02T15:25:38Z”， “内容”：“在过去的五年里，以亚特兰大为首的东南地区已经从科技领域的“最保守的秘密之一”变成了一个充满活力的生态系统，拥有一群价值数十亿美元的科技企业……[ +18425 个字符]" },

【问题讨论】：

我对 RN 不熟悉，但我认为您需要遍历这些文章。所以代替文章?.name}>> 尝试使用 item.key}>> 可能我错过了一些东西，但我认为你会有一个想法。我从here 得到了那个例子
@boolfalse 感谢您的回复，我在提取密钥方面没有任何问题，keyExtractor 组件将根据您正在使用的 API 更改，在此示例 API 中，因为它具有相同的“id”我找不到更好的键而不是标题（（名称错误，我会更改它））我相信问题应该出在 renderItem 属性中，但我不能确定如你所知。
@navidabasi 您能否发布articles 中的一项内容，以及DetailSscreen 期望的道具是什么？
@nipuna777 我已经从 API 添加了一个示例，DetailScreen 假设向我显示 API 中所选主题的描述和图像，因此它将从详细屏幕中获取“结果”
您是否尝试将(result) => { 更改为({result}) => {？现在result指的是props中的DetailScreen

标签： javascript node.js reactjs react-native react-native-flatlist

【解决方案1】：

正如其他人和我在 cmets 中指出的那样有2个语法问题

在 keyExtractor 中将 articles?.name 更改为 articles.name
从(result) 到({result}) 在DetailScreen 中正确解构道具这两者对于您的代码正常工作都很重要。

最后，我注意到您的 articles 数据是一个对象 {}，而 FlatList 中的数据必须是一个数组 []。因此，请将您从 API 接收的文章数据转换为数组，它将起作用。 Link to React Native official docs 你会看到 FlatList 只接受 data 属性中的数组。

这里是指向codesandbox 的链接，您将看到我将您的文章对象数据转换为updatedArticles 数组，并将updatedArticles 传递到FlatList 中，它正在正确呈现它。

【讨论】：

感谢您为解决我的问题所做的所有努力，从我的一位朋友那里找到了解决方案，他提到因为我使用的是 react-navigation V5，所以我应该遵循 reactnavigation.org/docs/params 而不是解决方案我从教程（视频中的导航 v3）中学到了 altought 通过考虑您的评论我应该说文章？.name 是一个真实的陈述，就像写一个 if 语句，比如如果文章给你一个答案，然后找到 article.name此外，API 为我提供了一组对象，这也不是问题。感谢 Subha 的所有努力。

【解决方案2】：

我发现解决方案取决于您使用的 react-navigation 版本，您可以将参数传递给其他屏幕的方式最终会改变，因为我使用的是 react navigation V5 并考虑了这个链接@987654321 @我应该以这种方式传递参数与

<TouchableOpacity onPress={() => navigation.navigate("Detail")}>
              <DetailScreen result={item} />
            </TouchableOpacity>

说实话这有点奇怪，为什么我们需要改变我们的编码方式取决于反应导航的版本：p

   <View>
     <Text>We have found {articles?.length} articles</Text>
     <FlatList
       data={articles}
       showsHorizontalScrollIndicator={false}
       // horizontal
       scrollEnabled
       keyExtractor={(articles) => articles?.title}
       extraData={articles} //makes flatList to re-render each time articles changes.
       renderItem={({ item }) => {
         //renderItem takes 'objects' from 'data' (data and item are keyWords for flatLists)
         return (
           <TouchableOpacity
             style={{ marginTop: 20 }}
             onPress={() =>
               navigation.navigate("Detail", {
                 article: item, //in navigation V5 we use this method to pass the chosen params(item) by setting a chosen name to mentioned screen("Detail") then we use useRoute to capture those.
               })
             }
           >
             {/* <DetailScreen result={item} /> */}
             <Text>{item.title}</Text>
           </TouchableOpacity>

           //<Text>{item?.title}</Text>
         );
       }}
     ></FlatList>

如果您没有正确理解代码，请尝试关注我在代码中放入的 cmets。

【讨论】：