渲染 React-native flatList 的问题

Question

Whosebugers 下午好我正在构建一个 RssFeeder 应用程序以提高我的 React Native 技能，但不知何故运行遇到了一个我现在想解决的问题，因为我尝试渲染我的对象我从一个叫做 newsAPI 的外部 API 那里得到，我试着把它们展示到一个 flatList 中，但由于某种原因它不能像我希望的那样工作；这是我的 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} /> 之后添加了一个文本组件，它显示文本组件 10 次，所以我想知道代码有什么问题。

result 在 <DetailScreen result={item} /> 中是我的第二个屏幕 '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", “名称”：“TechCrunch” }, “作者”：“乔纳森希伯”， "title": "亚特兰大是如何成为东南部数十亿美元初创企业的顶级孵化地的？", "description": "在过去的五年里，以亚特兰大为首的东南地区已经从科技界“保守得最好的秘密之一”变成了一个充满活力的生态系统运行t十亿美元的科技企业，在投资界被称为“联合国……”， "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", “发布时间”：“2021-05-02T15:25:38Z”， "content": "在过去的五年里，以亚特兰大为首的东南地区已经从科技界“保守得最好的秘密之一”变成了充满活力的生态系统运行t十亿美元的科技公司…… [+18425 个字符]” },

Answer 1

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

在 keyExtractor

articles?.name

articles.name

在 DetailScreen 中正确解构道具从 (result) 到 ({result}) 这些对于您的代码正常工作都很重要。

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

这是 link 到 codesandbox 的地方，您会看到我将您的文章对象数据转换为 updatedArticles 数组，并将 updatedArticles 传递到 FlatList 中，它正在正确渲染它。

Answer 2

我发现解决方案取决于您使用的 react-navigation 版本，您可以将参数传递给其他屏幕的方式最终会改变，因为我使用的是 react navigation V5 并考虑到这个 link https://reactnavigation.org/docs/params 与

相比，我应该以这种方式传递参数

<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>

如果您没有正确理解代码，请尝试关注我在代码中添加的注释。

渲染 React-native flatList 的问题

issue with rendering the React-native flatList

javascript

node.js

reactjs

react-native

react-native-flatlist