FlatList renderItem 返回未定义答案

【问题标题】：FlatList renderItem returning undefinedFlatList renderItem 返回未定义
【发布时间】：2021-02-10 23:43:42
【问题描述】：

我有一个 flatList，它用一些道具渲染一个组件，但 renderItem 返回我“未定义”。我是 react-native 的新手，我找不到解决方案。谢谢

编辑：

我在 'posts.js' 中使用的样式是否可能会影响 flatList 渲染？

Feed.js：

  export default function Feed() {
    const Posts = [
        { id: 1, title: "eu", photoDesc: 'eu' },
        { id: 2, title: "me", photoDesc: 'me' }

    ]
    console.log;

    return (
        <FlatList
            keyExtractor={props => props.id}
            data={Posts}
            renderItem={({ item }) => <FeedPosts title={`${item.title}`} photoDesc={`${item.photoDesc}`} ></FeedPosts>}
        >
        </FlatList>
    );

}

Posts.js：

 export default function FeedPosts(props) {
    return (
        <Container>
            <Header>
                <TouchableOpacity>
                    <FontAwesome5 name='bell' size={40} style={{ marginLeft: 10 }}></FontAwesome5>
                </TouchableOpacity>
                <TouchableOpacity>
                    <Ionicons name='add-circle' size={40} style={{ marginRight: 5 }}></Ionicons>
                </TouchableOpacity>
            </Header>
            <Body>
                <Time>15/12/2021 as 17:42pm</Time>
                <User>
                    <Icon source={require('../../assets/vibe.jpg')}></Icon>
                    <Description>{props.title}</Description>
                </User>

                <Content>
                    <PetPhoto source={props.postImg}></PetPhoto>
                </Content>

                <ContentDesc >
                    <PhotoDesc> {props.photoDesc}</PhotoDesc>
                </ContentDesc>

                <Bottom>
                    <Comment title="Comment" placeholder="Escrever Comentário"></Comment>
                </Bottom>
                <Buttons></Buttons>
            </Body>
        </Container>
    );
}

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

您的变量 Posts 包含一个 React 组件数组。相反，它应该包含您转换为组件的数据数组。

所以你的Posts 应该看起来更像这样：

const Posts = [
 {title: "My title", photoDesc: "Desc"},
 {title: "My title2", photoDesc: "Desc2"},
 {title: "My title3", photoDesc: "Desc3"}
]

这是一个示例（直接来自 React Native 文档），说明它是如何在上下文中工作的：

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

(https://reactnative.dev/docs/flatlist)

您可以在上面的示例中看到DATA 是一个对象数组，它通过函数renderItem 转换为组件。与您的用例非常相似。

【讨论】：

成功了，谢谢！但它只呈现一个组件，即使“帖子”有多个数据
这不应该发生。如果您使用代码（不是屏幕截图）编辑您的问题，我可以看看。
我设法解决了这个问题。 'container' 是一个样式视图组件，我只是为其添加了 'flex: 1' 并渲染了两个屏幕，感谢您的帮助！
谢谢，还有一件事。在props中，postImg是一张图片，如何从datas数组中获取呢？
如果是本地图片，可以通过 require (postImg: require('imgSrc')) 传递。如果您从其他地方加载它们，我建议您将 URL 保留在数据数组中，然后将图像加载到您的子组件中。