извлечение данных из API и шоу по методу рендеринга

Question

Я получил данные из API, но проблема в том, когда я показываю данные в методе рендеринга, то он показывает "Undefine" Пожалуйста, помогите мне исправить это

Это мой код: -

var ProductData=''
export default class ApiProduct extends Component {
FetchProduct=()=>{

    fetch('https://drawtopic.in/projects/wordpress/wp- json/wc/v2/products?consumer_key=ck_044491712632ef889ec13c75daff5879a8291674&consumer_secret=cs_a8e16c732e1812017e15d278e1dce2765a88c49b',{
  method:'GET',
})
.then((response) => response.json())
.then((res) =>{
ProductData= res;
})     
}

render() {
{this.FetchProduct()}
{console.warn(ProductData)}
return (
  <View/>
)}

я хочу показать все данные в методе рендеринга

Answer 1

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

export default class ApiProduct extends Component {
  constructor(){
    super();
    this.state = {
      productData: undefined;
    };
  }     

  async componentDidMount(){
    await this.fetchProduct();
  }

  fetchProduct = () => {
    fetch('https://drawtopic.in/projects/wordpress/wp- json/wc/v2/products?consumer_key=ck_044491712632ef889ec13c75daff5879a8291674&consumer_secret=cs_a8e16c732e1812017e15d278e1dce2765a88c49b',{
      method:'GET',
    })
    .then((response) => response.json())
    .then((res) =>{
      this.setState({
        productData: res
      })
    })     
  }

render() {
  const {productData} = this.state;
  console.log(productData);
  return (
    <View/> // add here your code to render data properly
  )
}}

Answer 2

Вот быстрый пример Экспо, который должен показать вам, как отобразить простой список.Не рекомендуется вызывать fetch внутри метода рендеринга, так как каждый повторный рендеринг будет вызывать fetch.

Вот закусочная для экспозиции https://snack.expo.io/S1-LKIyQE

import React from 'react';
import { Text, View, StyleSheet, FlatList, SafeAreaView } from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      productData: []
    }
  }

  async componentDidMount () {
    await this.getData();
  }

  async getData() {
    try {
      let url ='https://drawtopic.in/projects/wordpress/wp-json/wc/v2/products?consumer_key=ck_044491712632ef889ec13c75daff5879a8291674&consumer_secret=cs_a8e16c732e1812017e15d278e1dce2765a88c49b'
      let response = await fetch(url, { method:'GET' });
      let responseJson = await response.json();
      this.setState({productData: responseJson});
    } catch (err) {
      console.warn(err);
    }
  }

  renderItem = ({item}) => {
      return (
      <View style={styles.mainItem}>
        <Text>{item.name}</Text>
      </View>
      );
    }

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


  render() {
    return (
      <SafeAreaView style={styles.container}>
      <FlatList
        extraData={this.state}
        data={this.state.productData}
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
      />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  },
  mainItem: {
    width:200,
    height: 80, 
    justifyContent: 'center', 
    alignItems: 'center', 
    margin: 10, 
    backgroundColor: 'yellow',
    borderColor: 'black',
    borderWidth: 1
  },
});

Здесь я использовал async/await, так как это может сделать код намного чище и яснее.Это отличная статья о различиях между promises и async/await https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8.

Я также дал вам быстрый пример того, как использовать FlatList для отображения ваших данных.Вам следует проверить документацию о том, как правильно его использовать https://facebook.github.io/react-native/docs/flatlist

Если вы хотите изменить способ отображения каждого элемента на экране, вам необходимо обновить метод renderItem.

Answer 3

Попробуйте, если у вас есть вопрос о том, как это работает, и я узнаю.

let self;
export default class ApiProduct extends Component {
  constructor(){
    super();
    self = this;
    this.state = {
      productData: null;
    };
  }
  FetchProduct=()=>{
    fetch('https://drawtopic.in/projects/wordpress/wp- json/wc/v2/products?consumer_key=ck_044491712632ef889ec13c75daff5879a8291674&consumer_secret=cs_a8e16c732e1812017e15d278e1dce2765a88c49b',{
      method:'GET',
    })
    .then((response) => response.json())
    .then((res) =>{
      self.setState({ productData: res});
    });
  }

  render() {
    this.FetchProduct();
    console.warn(self.state.productData);
    return (
      <View/>
    );
  }