React Native 从 json 数据中获取信息答案

【问题标题】：React native get information from json dataReact Native 从 json 数据中获取信息
【发布时间】：2021-06-22 11:40:11
【问题描述】：

我是 react native 的初学者，所以，我想做的是在数组中获取 item.CPU 以便能够将其放入 sampleData 中，这样我就可以使用 PureChart 在图形中呈现信息。

import React, { Component } from 'react';
import { StyleSheet, ActivityIndicator, SafeAreaView, FlatList, Text, View } from 
'react-native';
import PureChart from 'react-native-pure-chart';
export default class App extends Component {

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

componentDidMount() {
  fetch('http://192.168.1.34:3000/users').then((response) => 
response.json()).then((json)=> this.setState({data : json.param})).catch((error) => 
 console.error(error));
}

render() {
const { data } = this.state;
let sampleData = [30, 200, 170, 250, 10];
return (

  <View style = {styles.container}>
  <PureChart  data={sampleData} type='line' />
  <SafeAreaView >
  <FlatList data ={data} keyExtractor={({ID}, index) => ID} renderItem={({item})=>(<Text>{item.CPU}</Text>)}/>
  </SafeAreaView>
  </View>

  // <SafeAreaView style={styles.container}>
  //     <FlatList
  //       data={data}
  //       keyExtractor={({ ID }, index) => ID}
  //       renderItem={({ item }) => (<Text>{item.CPU}, {item.RPM}</Text>)}
  //     />
  //
  
   );
  }
   };

const styles = StyleSheet.create({
   container: {
  top: "50%",
  },
  });

【问题讨论】：

标签： reactjs graphics native react-native-flatlist

【解决方案1】：

在 prop 中传入 json 数据可能更容易。您应该在加载视图之前提出此请求。这样您就可以消除由于服务器错误、加载不当引起的错误等问题而产生的潜在错误。

【讨论】：

我该怎么做？