Рендеринг объектов Array в FlatList React Native - PullRequest
Новая
       98

Рендеринг объектов Array в FlatList React Native

0 голосов
/ 07 ноября 2019

Я извлекаю данные из axios через мой API, но когда я рендеринг данных, он показывает пустой шаблон. Пожалуйста, дайте мне знать, если я делаю какую-либо ошибку. Я вставил свой код с ответом 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>
        );
    }
}

Ответы [ 2 ]

2 голосов
/ 07 ноября 2019

Я вижу несколько проблем.

Во-первых, вам нужно использовать ({item}) в renderItem, как указано в комментариях.

Во-вторых, вы смешиваете асинхронное / ожидание с затемблок. В этом случае не требуется асинхронизация / ожидание.

Таким образом, ваш код должен быть: 

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

1 голос
/ 07 ноября 2019 
                    <FlatList
                        data={this.state.itemList}
                        renderItem={**(item)** => {
                            return(
                                <Text>{item.ItemName}</Text>
                            );
                        }}
                        keyExtractor={(item) => item.ID}
                      />

здесь "item" - это объект, он имеет ID и ItemName. когда вы называете так, как этот элемент не распознается как объект, поэтому ничего не показывается,

({item})

, вы должны изменить вышеуказанный вызов следующим образом. затем элемент распознается как объект, и вы можете вызывать его атрибуты как item.Id или item.ItemName

Я думаю, вы поняли, почему ваш код не работает. пожалуйста, учитесь реагировать родной жизненный цикл. componentDidMount не хочет асинхронную, после рендеринга компонента компонентDidMount будет вызывать и вызывать componentWillMount одновременно, когда компонент loading.componentWillReceiveProps вызывает, когда любое состояние компонента изменяется.

...