json - React Native 如何存储和处理 JSON 数据？

Question

我是 React Native 编程的初学者。我很难找到解释如何执行此操作的教程。

我正在从 Web API 获取公交时刻表数据。

我想做以下事情。

将 JSON 数据存储在变量或其他东西中。

对该 JSON 数据运行函数以返回适当的总线数据

关于这个我有两个问题。

如何以某种方式将 JSON 数据存储在变量中或本地？

如果我想对 JSON 数据运行 JavaScript 函数，我应该在哪里做？在单独组件的 render() 函数中？

我试过的

我声明 let jsondata课外。
内 componentDidMount我存储了 responseJson至 jsondata使用匿名函数。当我在那里 console.log 时，它会正确显示 JSON 数据。

但是，当我尝试 {console.log(jsondata)}之后 Flatlist ，它返回 undefined而 "Hello"正确记录。

为什么会这样？如何使用 jsondata？

代码

import React from 'react';
import { FlatList, ActivityIndicator, Text, View  } from 'react-native';

let jsondata;
export default class FetchExample extends React.Component {

    constructor(props){
        super(props);
        this.state ={ isLoading: true}

    }

    // make an API call in the beginning
    componentDidMount(){
        return fetch('https://api.myjson.com/bins/18o9sd')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson.shosfc.weekday[7]
                }, function(){
                    jsondata = responseJson;
                    // console.log(jsondata)
                });

            })
            .catch((error) =>{
                console.error(error);
            });
    }

    render(){
        if(this.state.isLoading){
            return(
                <View style={{flex: 1, padding: 50}}>
                    <ActivityIndicator/>
                </View>
            )
        }

        return(
            <View style={{flex: 1, paddingTop:50}}>
                <FlatList
                    data={this.state.dataSource}
                    renderItem={({item}) => <Text>{item.min}</Text>}
                    // keyExtractor={({id}, index) => id}

                />
                {console.log(jsondata)}
            </View>

        );
    }
}

Answer 1

如何以某种方式将 JSON 数据存储在变量中或本地？

你可以把它放在一个状态值中，并使用本地存储进行存储。

状态值传递

 this.state ={ jsondata:{}}
...
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson.shosfc.weekday[7],
                    jsondata = responseJson
                });
                console.log(this.state.jsondata);
              }

本地存储数据

import {AsyncStorage} from 'react-native';
...

            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson.shosfc.weekday[7],
                });
           AsyncStorage.setItem('jsondata', JSON,stringify(responseJson));
              }

如果我想对 JSON 数据运行 JavaScript 函数，我应该在哪里做？在单独组件的 render() 函数中？

我觉得这个问题很难理解。但是我理解的这个问题的答案是，您可以在 JSON 之外声明和使用一个函数。

thisfunc(){
 alert("function in Json")
}
...
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson.shosfc.weekday[7],
                });
               this.thisfunc.bind(this)
              }