将数组对象渲染到 FlatList React Native答案

【问题标题】：Render Array Objects into FlatList React Native将数组对象渲染到 FlatList React Native
【发布时间】：2020-03-03 17:25:50
【问题描述】：

我通过我的 API 从 axios 获取数据，但是当我渲染它的数据时，它会显示空白模板。如果我做错了什么，请告诉我。我用 api 响应粘贴了我的代码。谢谢

console.log => response.data

Data Array [
  Object {
    "ID": 2466,
    "ItemName": "WWE2K20"
}
]

我的组件

import React, { Component } from 'react';
import { Container, Header, Content, Card, CardItem, Body, Text } from 'native-base';
import { View, StyleSheet, FlatList, Image } from 'react-native';
import axios from 'axios';

export default class HomeScreen extends Component {
    constructor() {
        super()
        this.state = {
            itemList: []
        }
    }
    async componentDidMount() {
        await axios.get('myapiuri')
            .then((response) => {
                this.setState({
                    itemList: response.data
                });
                console.log("Data", this.state.itemList)
            })
            .catch(error=>console.log(error))
    }

    render() {
        return (
            <Container>
                <Content>
                    <FlatList
                        data={this.state.itemList}
                        renderItem={(item) => {
                            return(
                                <Text>{item.ItemName}</Text>
                            );
                        }}
                        keyExtractor={(item) => item.ID}
                    />
                </Content>
            </Container>
        );
    }
}

【问题讨论】：

我认为 renderItem 获取了一个作为参数传递的对象： renderItem={({item}) => { return( {item.ItemName} ); }}
@MuhammedB.Aydemir 不工作。 :(
请使用 {JSON.stringify(item)} 进行调试，如果不显示数据，则响应可能为空或格式错误
您能分享 API url 或尝试使用数据的静态常量吗？另外请不要指望console.log("Data", this.state.itemList) 显示状态，因为 setState 是异步函数，甚至在实际设置状态之前就可以执行下一行。

标签： javascript react-native axios react-native-flatlist native-base

【解决方案1】：

我发现了一些问题。

首先您需要在 renderItem 中使用 ({item})，如 cmets 中所述。

其次，您将 async/await 与 then 块混合在一起。在这种情况下，不需要异步/等待。

所以你的代码必须是：

export default class HomeScreen extends Component {
  constructor() {
    super();
    this.state = {
      itemList: []
    };
  }

  componentDidMount() {
    axios
      .get("myapiuri")
      .then(response => {
        this.setState({
          itemList: response.data
        });
        console.log("Data", this.state.itemList);
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <Container>
        <Content>
          <FlatList
            data={this.state.itemList}
            renderItem={({ item }) => {
              return <Text>{item.ItemName}</Text>;
            }}
            keyExtractor={item => item.ID}
          />
        </Content>
      </Container>
    );
  }
}

如果你还有问题，请看这个例子：

https://snack.expo.io/@suleymansah/c0e4e5

【讨论】：

【解决方案2】：

                    <FlatList
                        data={this.state.itemList}
                        renderItem={**(item)** => {
                            return(
                                <Text>{item.ItemName}</Text>
                            );
                        }}
                        keyExtractor={(item) => item.ID}
                      />

这里的“item”是一个对象，它有，ID和ItemName。当您像此项目一样调用时，无法将其识别为对象，这就是为什么没有显示，

({ item })

你应该像这样改变上面的调用。然后 item 识别为一个对象，您可以将其属性称为 item.Id 或 item.ItemName

我想你明白了为什么你的代码不起作用。请学习 react-native 生命周期。 componentDidMount 不需要异步，在组件渲染后 componentDidMount 会在组件加载时调用，并且 componentWillMount 会在组件的任何状态发生变化时调用 componentWillReceiveProps。

【讨论】：