Question

我有一个使用选项卡栏的功能良好的本机应用程序。在当前版本中，我可以使其显示从YouTube视频中找到的VSON的平面列表。我现在想使用自己的JSON列表，但是出现问题。

这是在线JSON文件的链接：api.jsonbin.io/b/5b3a49c8a5a2f34ea6b0fbc8

这是我正在处理的特定文件的代码，这些代码是我从youtube视频中获得的（此代码有效并显示名称列表）。请注意，这是我的标签栏中的一个标签：

我的问题是我需要设定什么 this.setState（{data：json.results}）到，然后设置什么 {${item.name.first} ${item.name.last}} }

如果我只是想显示药物的CodeableConcept

import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
FlatList
} from "react-native";

import { Icon } from 'native-base'


class LikesTab extends Component {

//SETTING THE STATE MAKING AN EMPTY ARRAY WHICH WE FIL
  state = {
    data: []
  };

  componentWillMount() {
this.fetchData();
  }

//Getting the data
  fetchData = async () => {
const response = await fetch("https://randomuser.me/api?results=500");
const json = await response.json();
this.setState({ data: json.results });
  };

  //var customData = require('./customData.json');


//Setting what is shown
  render() {
return (
  <View style={styles.container}>
    <FlatList
      data={this.state.data}
      keyExtractor={(x, i) => i}
      renderItem={({ item }) =>
        <Text>
          {`${item.name.first} ${item.name.last}`}
        </Text>}
    />
  </View>
);
  }
}
export default LikesTab;

const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
}
});

这是我当前的代码，仅显示空白屏幕：

import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
FlatList
} from "react-native";

import { Icon } from 'native-base'


class LikesTab extends Component {

//SETTING THE STATE MAKING AN EMPTY ARRAY WHICH WE FIL
  state = {
data: []
  };

  componentWillMount() {
this.fetchData();
  }

//Getting the data
  fetchData = async () => {
const response = await fetch("api.jsonbin.io/b/5b3a49c8a5a2f34ea6b0fbc8");
const json = await response.json();
this.setState({ data: json.results });
  };

  //var customData = require('./customData.json');


//Setting what is shown
  render() {
return (
  <View style={styles.container}>
    <FlatList
      data={this.state.data}
      keyExtractor={(x, i) => i}
      renderItem={({ item }) =>
        <Text>
          {`${item.entry.medicationCodeableConcept}`}
        </Text>}
    />
  </View>
);
  }
}
export default LikesTab;

const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
}
});

Answer 1

我认为在设置状态时，您正在设置json.results的未定义值与此相反，您需要这样做

fetchData = async () => {
    const response = await fetch(
      'http://api.jsonbin.io/b/5b3a49c8a5a2f34ea6b0fbc8'
    );

    const json = await response.json();
    console.log(json);
    this.setState({ data: json.entry });
  };

在渲染时使用

        <Text>{item.resource.medicationCodeableConcept.text}</Text>

我将如何使用React Native访问此JSON文件

1 个答案: