Question

获取ID正常，但是我需要做更多的提取工作：

产品名称
商店中的总商品
还有一些

我还需要其余的工作。有人可以帮我吗？谢谢！

我自己尝试了一些尝试，但没有成功。

或者我应该使用其他方法！

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Alert } from 'react-native';

import Header from './components/Header';
import {getBrood} from './api/brood';


export default class App extends Component {

constructor(props) {
  super(props);

  this.state = {
    isLoading: true,
    data: null
  }
}

componentDidMount() {
  getBrood().then(data =>{
    this.setState({
      isLoading: false,
      data: data
    });
  }, error => {

  }
)
}


render() {
  return (
    <View style={styles.container}>
        <Header title="Custom size cms"/>
        <View style={{flex: 1, marginTop: 10 }}>
        <Image style={styles.image} source={{uri: 'https://cdna.artstation.com/p/assets/images/images/005/394/176/large/bram-van-vliet-low-poly-trees-lars-mezaka-3-001.jpg?1490717914'}}/>
        <Text>ID:{this.state.data}</Text>
        </View>
    </View>
  );
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 180,
    height: 180,
    marginTop: 10
  }
});

前端

import { url, username, password, id } from './config';

export async function getBrood() {

  try{
     let data = await fetch(`${url}${id}?consumer_key=${username}&consumer_secret=${password}`);

     let result = await data.json();
     data = null;
     return result.id

  } catch (error){
    throw error;
  }
}

后端

目前，我只能进行一次ID提取。其余的都不起作用...

return.result.id

如果我将（return.result.id）更改为数据错误，则无输出：

我需要ID，名称，价格，状态

Answer 1

如果此API调用返回了多个项目，则需要对其进行循环

render() {
  return this.state.data.map(function(res) {
     return (
       <View style={styles.container}>
        <Header title="Custom size cms"/>
        <View style={{flex: 1, marginTop: 10 }}>
          <Image style={styles.image} source={{uri: 'https://cdna.artstation.com/p/assets/images/images/005/394/176/large/bram-van-vliet-low-poly-trees-lars-mezaka-3-001.jpg?1490717914'}}/>
          <Text>ID:{res.id}</Text>
        </View>
       </View>
     );
   })
}

更新：我看到您需要名称，价格等。只需为名称添加res.name

请看此示例以进一步了解 https://reactjs.org/docs/faq-ajax.html

Answer 2

从获取中返回想要的字段，如果仅从catch中抛出，也无需将其包装在try / catch中

export async function getBrood() {
  const data = await fetch(`${url}${id}?consumer_key=${username}&consumer_secret=${password}`)
  const { id, name, price, status } = await data.json()
  return { id, name, price, status }
}

使用数据更新状态

componentDidMount() {
  getBrood()
    .then(data => {
      this.setState({
        isLoading: false,
        data,
      })
    })
    .catch(err => {
      // do something when error occurs
      // dont forget to set isLoading to false
      this.setState({ isLoading: false })
    })
}

现在您将可以通过this.state.data.id/name/price/status

访问数据

请注意，您无法在请求完成之前访问数据，因此您将需要添加检查以查看其是否未加载，并且在发生错误的情况下this.state.data不为空

render() {
  const { isLoading, data } = this.state
  const { id, name, price, status } = data || {}
  return (
    <View style={styles.container}>
      <Header title="Custom size cms"/>
      <View style={{flex: 1, marginTop: 10 }}>
      <Image style={styles.image} source={{uri: 'https://cdna.artstation.com/p/assets/images/images/005/394/176/large/bram-van-vliet-low-poly-trees-lars-mezaka-3-001.jpg?1490717914'}}/>
      {isLoading && <Text>Loading...</Text>}
      {data && (
        <>
          <Text>ID: {id}</Text>
          <Text>Name: {name}</Text>
          <Text>Price: {price}</Text>
          <Text>Status: {status}</Text>
        </>
      )}
      </View>
    </View>
  )
}

Answer 3

我自己修复了该问题，开始使用调试器进行游戏和弄弄，我将打开一个新问题，因为我获取了ID，因此现在我可以得到一个产品，我需要一个固定的5个清单产品

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Alert } from 'react-native';

import Header from './components/Header';
import {getBrood} from './api/brood';

export default class App extends Component {

constructor(props) {
  super(props);

  this.state = {
    isLoading: true,
    id: null,
    name: null,
    price: null
  }
}

componentDidMount() {
  getBrood().then(data =>{
    this.setState({
      isLoading: false,
      id: data.id,
      name: data.name,
      price: data.price,
      Voorraad: data.stock_quantity

    });
  }, error => {

  }
)
}


render() {
  return (
    <View style={styles.container}>
        <Header title="Custom size cms"/>
        <View style={{flex: 1, marginTop: 10 }}>
        <Image style={styles.image} source={{uri: 'https://cdna.artstation.com/p/assets/images/images/005/394/176/large/bram-van-vliet-low-poly-trees-lars-mezaka-3-001.jpg?1490717914'}}/>
        <Text>ID: {this.state.id}</Text>
        <Text>Name: {this.state.name}</Text>
        <Text>Price: {this.state.price}</Text>
        <Text>Voorraad: {this.state.Voorraad}</Text>
        </View>
    </View>
  );
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 180,
    height: 180,
    marginTop: 10
  }
});

前端

import { url, username, password, id, products } from './config';

export async function getBrood() {
  const res = await fetch(`${url}${products}${id}?consumer_key=${username}&consumer_secret=${password}`)
  let data  =  await res.json();
  return data;
}

后端

结果

取得React本机为真

3 个答案: