Question

我从api中获取了数据，但问题是当我在渲染方法中显示数据时，它显示“未定义” 请帮我修复它

这是我的代码：-

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

尝试这种方法，如果您对它的工作方式有疑问，请告诉我。

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

Answer 2

我将尝试在您的代码中进行订购。在render方法中获取数据不是一个好主意，最好使用生命周期方法，例如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 3

这里是一个简短的Expo示例，应该向您展示如何呈现一个简单的列表。在render方法中调用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方法。

从api提取数据并在渲染方法上显示

3 个答案: