FlatList renderItem 返回未定义

Question

我有一个 flatList 可以渲染带有一些道具的组件，但是 renderItem returns 我 'undefined'。我是 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>
    );
}

Answer 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 转换为组件。与您的用例非常相似。

FlatList renderItem 返回未定义

FlatList renderItem returning undefined

react-native

react-native-flatlist