FlatList 不渲染从服务器获取的父组件数据，在 React Native 的子组件中

Posted 2023-02-22

【中文标题】FlatList 不渲染从服务器获取的父组件数据，在 React Native 的子组件中

【英文标题】：FlatList not rendering parent component data gotten from server, in child component in React Native

【发布时间】：2022-01-15 23:00:21

【问题描述】：

我目前正在从我的服务器获取数据并将其保存在父组件的 UseState 中并将其传递给我的子组件。我在执行 console.log 时看到数据正在传递，但是当我尝试使用 FlatList 渲染它时，我得到了这个错误以及一个无限的渲染组件列表，其中没有任何数据

这是我用来拨打电话的代码，我将根据选择的选项在“infoDisplay”中返回平面列表

const games = (item) => (
        <View style=styles.gameContainer>
            <Text style=styles.gTitle>
                <Text style=styles.gConTitle>Title: </Text>item.Title</Text>
            <Text style=styles.gInfo><Text style=styles.gConTitle>Release Date: </Text>item.Year</Text>
            <Text style=styles.gInfo><Text style=styles.gConTitle>Genre: </Text>item.Genre</Text>
        </View>
    );
if(props.name == 'Games')
    console.log("props.parentToChild: ", props.parentToChild)
    alert(props.parentToChild)
    infoDisplay = <FlatList
                    data=props.parentToChild
                    renderItem=games
                    keyExtractor=item => item.id/>

这是我要处理的数据的 sn-p：

澄清一下，如果我将我的数据放在一个数组中，该列表实际上会在大多数情况下加载/工作，但是当我获取我的数据并传递它时，我会收到此错误。

【参考方案1】：

我已经修复了你的代码，这里有一个沙盒链接 https://codesandbox.io/s/wizardly-sid-wuz4v?file=/src/App.js

您可以根据需要在日志和 ChildComponent 的渲染中获取数据，并且应该在之前使用“keyExtractor”处理警告。

import React,  useEffect, useState  from "react";
import  StyleSheet, Text, View, FlatList  from "react-native";

function ChildComponent(props) 
  const games = ( item ) => (
    <View key=item.id style=styles.gameContainer>
      <Text style=styles.gTitle>
        <Text style=styles.gConTitle>Title: </Text>
        item.Title
      </Text>
      <Text style=styles.gInfo>
        <Text style=styles.gConTitle>Release Date: </Text>
        item.Year
      </Text>
      <Text style=styles.gInfo>
        <Text style=styles.gConTitle>Genre: </Text>
        item.Genre
      </Text>
    </View>
  );

  if (props.name === "Games") 
    console.log("props.parentToChild: ", props.parentToChild);
  

  return (
    <FlatList
      data=props.parentToChild
      renderItem=games
      keyExtractor=(item) => item.id
    />
  );


function App() 
  const [parentToChildState, setParentToChildState] = useState(null);

  useEffect(() => 
    const parentToChild = [
      
        id: 0,
        Title: "Rise of the Tomb Raider",
        Year: "2016-02-09",
        Genre: "action-adyenture"
      ,
       id: 1, Title: "Death Stranding", Year: "2019-11-08", Genre: "action" 
    ];

    setParentToChildState(parentToChild);
  , []);

  return <ChildComponent name="Games" parentToChild=parentToChildState />;


const styles = StyleSheet.create();

export default App;

【讨论】：

天哪，我发现我的问题在于我是如何保存数据的。我没有以原始形式（对象数组）保存它，而是使用了 stringify ，这就是让我感到困惑的原因。抱歉让我的问题感到困惑。