Javascript 获取react native true

Fetch id正在工作，但我需要执行更多的Fetch操作：

产品名称

店内产品总数

还有一些

我需要让其余的工作也顺利进行。有人能帮我吗？谢谢大家!

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

或者我应该用另一种方法

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

后端

我现在只能取一个，只有id。其余的都不起作用了

return.result.id

如果我将（return.result.id）更改为data，则不会得到任何输出：

我需要身份证，姓名，价格，状态

---

如果此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>
     );
   })
}

render（）{
返回此.state.data.map（函数（res）{
返回(
ID:{res.ID}
);
})
}

更新： 我知道你需要姓名、价格等。。只需为名称添加

res.name

---

查看此示例以了解更多信息

从fetch返回所需的字段，如果您仅从catch中抛出，则无需将其包装为try/catch

导出异步函数getfound（）{
const data=wait fetch（`${url}${id}？消费者密钥=${username}和消费者密钥=${password}`）
const{id，name，price，status}=wait data.json（）
返回{id，名称，价格，状态}
}

使用数据更新状态

componentDidMount（）{
getground（）
。然后（数据=>{
这是我的国家({
孤岛加载：false，
数据，
})
})
.catch（错误=>{
//发生错误时做点什么
//别忘了将isLoading设置为false
this.setState（{isLoading:false}）
})
}

现在您可以通过

this.state.data.id/name/price/status

请注意，您无法在请求完成之前访问数据，因此您需要添加一个检查，以查看其是否未加载，以及如果出现错误，this.state.data是否为null

render（）{
const{isLoading，data}=this.state
const{id，name，price，status}=data}
返回(
{isLoading&&Loading…}
{数据&&(
ID:{ID}
名称：{Name}
价格：{Price}
状态：{Status}
)}
)
}

我自己修复了它，我开始玩调试器，我将打开一个新问题，因为我获取了一个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
  }
});

后端

结果

---

不清楚问题是什么只是从产品端点获取还是问题是什么？只是从后端返回结果而不是结果.id，然后显示id:this.state.data.id，或Name:this.state.data.Name等@NijatAliyev不起作用：我得到的错误是TypeError:null不是对象（正在评估'this.state.data.id'@HaykShakhbazyan我从一个API中获得了一些数据。我设法只获得了一个获取工作…但我需要从API中获得5件东西。我没有错误，但id、名称、价格和状态为空。..with console.log（{id}）；

object{“id”：undefined}

如果我在

中更改背景，从“/config”导入{url，用户名，密码，id，products}；导出异步函数getfound（）{const res=await fetch（`${url}${products}${id}？consumer_key=${username}&consumer secret=${password}）让data=await res.json（）；console.log（data）}

它在日志中给我的输出对我来说不起作用，因为后端，我让它工作。我发布了我自己的anwser。（现在我需要获取一个包含多个产品的列表，我今晚将开始一个新的ask帖子）

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