找不到变量：item React native FlatList答案

【问题标题】：Can't find variable: item React native FlatList找不到变量：item React native FlatList
【发布时间】：2020-04-22 03:31:38
【问题描述】：

大家好，我的 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>
    )

}

}

我的目标是在卡片组件中显示来自 wordpress 博客的帖子到我的主页，但是我不断收到此错误： ReferenceError：找不到变量：项目

感谢您的帮助:)

【问题讨论】：

标签： react-native fetch react-native-flatlist itemrenderer

【解决方案1】：

由于这一行，您会收到该错误

keyExtractor={item,index => index.toString()}

改成

keyExtractor={(item,index) => index.toString()}

另一件事是您使用 List 的方式错误，并且由于您使用的是 FlatList，因此无需在此处使用 List 而不是 List 使用 View。

 <View>
    <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()}
    />
</View>

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

在您的代码中，state 中的 posts 被正确设置为空数组。
之后

 const posts = await response.json();
    this.setState({posts});

posts 可以不是数组而是其他。

先检查

【讨论】：

【解决方案3】：

在你的 renderItem 方法中，不要在 {} 中传递 item，首先控制台在这里记录你的 item 参数，看看值是什么：

renderItem={(item ) => {
console.log({item})
             return <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>
          }}

【讨论】：

【解决方案4】：

这样你可以从源中提取数据并设置在平面列表中

数据= {this.state.GridListItems}

           renderItem={({item}) =>

           <TouchableOpacity
          onPress={this.getListViewItem.bind(this, item)}
          style={{flexDirection: 'row',marginTop:10}}
        >

              <Image source={{ uri: item.icon}} style = {{height:65,width:65,marginStart:20,padding:10,alignSelf:"center",borderRadius:5}} />
               <Text style={styles.item}  >{item.key}</Text> 

                     </TouchableOpacity>
                        }  

           ItemSeparatorComponent={this.renderSeparator}  

       />

【讨论】：