时间戳

首页 > 解决方案 > 我将如何使用 React Native 访问这个 JSON 文件

javascript - 我将如何使用 React Native 访问这个 JSON 文件

问题描述

我有一个使用标签栏的正常反应本机应用程序。在我当前的版本中，我可以让它显示我从 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'
}
});

标签： javascriptandroidiosjsonreact-native

解决方案

我认为当你设置状态时，你设置了一个未定义的值，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>

推荐阅读