找不到变量:item React native FlatList

问题描述 投票:0回答:4

大家好,我的FlatList有问题这是代码:

我不知道问题来自哪里

import React, { Component } from 'react'
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import {View, Text, FlatList} from 'react-native';
import {
    Avatar,
    Button,
    Card,
    Title,
    Paragraph,
    List,
    Headline,
  } from 'react-native-paper';


export default class Home extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
          posts: []
        };
    }
    componentDidMount() {
        this.fetchLastestPost();
      }

  async fetchLastestPost() {
    const response = await fetch(
      'https://kriss.io/wp-json/wp/v2/posts?per_page=5'
    );
    const posts = await response.json();
    this.setState({posts});
  }

render() {

    return (
        <List>
        <Headline style={{ marginLeft: 30 }}>Lastest Post</Headline>
        <FlatList
          data={this.state.posts}
          renderItem={({ item }) => (
              <Card
                style={{
                  shadowOffset: { width: 5, height: 5 },
                  width: '90%',
                  borderRadius: 12,
                  alignSelf: 'center',
                  marginBottom: 10,
                }}>
                <Card.Content>
                  <Title>{item.title.rendered}</Title>
                </Card.Content>
                <Card.Cover
                  source={{ uri: item.jetpack_featured_media_url }}
                />
              </Card>
          )}
          keyExtractor={item,index => index.toString()}
        />
    </List>
    )

}

}

我的目标是在card组件中显示从wordpress博客到主页的帖子,但我不断收到此错误:ReferenceError:找不到变量:项目

感谢您的帮助:)

react-native fetch react-native-flatlist itemrenderer
4个回答
1
投票

由于此行而出现该错误


1
投票

这样,您可以从源提取数据并在平面列表中进行设置


0
投票

我认为,您必须检查API服务器的响应。


0
投票

在您的renderItem方法中,不要在{}中传递项目,首先控制台在此处记录您的item参数,看看值是什么:

© www.soinside.com 2019 - 2024. All rights reserved.