Ich habe Daten von der API abgerufen, aber das Problem ist, wenn ich Daten in der Render-Methode zeige, dann wird "Undefine" angezeigt. Bitte helfen Sie mir, das Problem zu beheben

Das ist mein Code: -

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

Ich möchte alle Daten in der Rendermethode anzeigen

0
shammi 18 Jän. 2019 im 16:31

3 Antworten

Beste Antwort

Hier ist ein kurzes Expo-Beispiel, das Ihnen zeigen soll, wie Sie eine einfache Liste rendern. Es ist keine gute Idee, fetch innerhalb der Rendermethode aufzurufen, da bei jedem erneuten Rendern der Abruf aufgerufen wird.

Hier ist ein Expo-Snack 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
  },
});

Hier habe ich async/await verwendet, da dies zu einem viel saubereren und klareren Code führen kann. Dies ist ein großartiger Artikel über die Unterschiede zwischen promises und async/await https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8.

Ich habe Ihnen auch ein kurzes Beispiel gegeben, wie Sie eine FlatList zum Anzeigen Ihrer Daten verwenden können. Sie sollten in den Dokumenten nachlesen, wie Sie es richtig verwenden können https://facebook.github.io / react-native / docs / flatlist

Wenn Sie bearbeiten möchten, wie jedes Element auf dem Bildschirm angezeigt wird, müssen Sie die Methode renderItem aktualisieren.

0
Andrew 18 Jän. 2019 im 13:55

Versuchen Sie es auf diese Weise, wenn Sie eine Frage haben, wie es funktioniert, lassen Sie mich wissen.

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/>
    );
  }
0
SmoggeR_js 18 Jän. 2019 im 13:44

Ich werde versuchen, in Ihrem Code eine Bestellung aufzugeben. Das Abrufen von Daten in der Rendermethode ist keine gute Idee. Es ist besser, Lebenszyklusmethoden wie componentDidMount zu verwenden. Um Ihr Anforderungsergebnis zu verarbeiten, legen Sie ein Statusfeld fest und lesen Sie in Ihrem Render Daten aus diesem Feld. Damit:

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
  )
}}
0
Milore 18 Jän. 2019 im 13:58