呈现React本机flatList时的问题

Question

下午好，StackOverflowers，我正在构建一个RssFeeder应用程序，以提高我的反应本地技能，但不知怎么的，我遇到了一个问题，我现在想解决这个问题，因为我试图将我从外部API newsAPI获得的对象呈现到一个flatList中，并且我试图将它们显示到一个flatList中，这个flatList由于某些原因不能像我希望的那样工作；下面是flatList的HomeScreen部分：

 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} />之后添加了一个文本组件，它向我展示了10次文本组件，所以我想知道代码有什么问题。

result in <DetailScreen result={item} />是我的第二个屏幕“DetailScreen”的一个虚构的道具，用于将所有数据从家庭传输到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"，"name"："TechCrunch“}，”作者“："Jonathan”，“标题”：“亚特兰大是如何成为东南部数十亿美元初创企业的头号温床的？”，“描述”：“在过去的五年中，以亚特兰大为首的东南地区已不再是科技界”最保守的秘密之一“，而是一个充满活力的生态系统，在投资界被称为”un…“。、"url"："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"”、"publishedAt"："2021-05-02T15:25:38Z“、"content"：”在过去五年中，以亚特兰大为首的东南地区已从“技术上保存得最好的秘密之一”转变为一个充满活力的生态系统，拥有一群价值十亿美元的科技股…+18425 chars“}，

Answer 1

我找到了依赖于are版本的解决方案--您所使用的将参数传递给其他屏幕的方式最终会改变，因为我使用的是react导航V5，通过考虑这个链接https://reactnavigation.org/docs/params，我应该以这种方式传递参数，与

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

老实说，这有点奇怪，为什么我们需要改变代码的编写方式取决于react导航的版本: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>

如果您没有正确理解代码，请集中注意我在代码中的注释。

Answer 2

正如其他人和我在评论中指出的，有两个语法问题

1. 将articles?.name更改为keyExtractor中的articles.name
2. 正确地将DetailScreen中的道具从(result)分解为({result})，这对代码的正确工作都很重要。

最后，我注意到articles数据是一个对象{}，而FlatList中的数据必须是数组[]。因此，请将您从API收到的文章数据转换为一个数组，它将工作。在链接以对本地官方文档作出反应中，您将看到FlatList只接受数据支柱中的数组。

下面是指向码箱的链接，您将看到我将您的文章对象数据转换为updatedArticles数组，并将updatedArticles传递到FlatList中，并且它正在正确地对其进行渲染。