Question

我正在从开源api获取json。我想将其存储为状态。无法以某种状态存储json数据。我需要使用此json数据将城市与json中的城市之一进行匹配。我需要将其存储在状态中。会非常有用。请帮忙！

构造器部分

constructor(props) {
  super(props)
  this.state = {
    location: null,
    loading: false,
    userLatitude: null,
    userLongitude: null,
    userCity: null,

    covidZones: []

  }

  this._requestLocation = this._requestLocation.bind(this)
  this.getZone = this.getZone.bind(this)

}

功能部件

getZone() {
  axios.get('https://api.covid19india.org/zones.json')
    .then(function(response) {

      this.setState({
        covidZones: response.data.zones
      })

    })
    .catch(function(error) {
      // handle error
      console.log(error);
    })
    .finally(function() {
      // always executed
    })
}

渲染部件

render() {
    const { location, loading } = this.state;

    return (
            <View>
                <Button
                    disabled={loading}
                    title="Get Location"
                    onPress={this._requestLocation}
                />

                <Text>{this.state.userCity}</Text>

                {this.getZone()} // calling the function, right here


                {loading ? (
                    <ActivityIndicator />
                ) : null}
                {location ? (
                    <Text>
                        {JSON.stringify(location, 0, 2)}
                    </Text>
                ) : null}
            </View>
        )
}

Answer 1

我为您准备了一个使用reactjs的示例。 react-native中应遵循相同的技术。请按照以下示例操作：

import React from "react";
import axios from 'axios';

export default class ZoneListPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            location: null,
            loading: false,
            userLatitude: null,
            userLongitude: null,
            userCity: null,
            covidZones: []
        };
    }
    componentDidMount() {
        this.setState({
            loading: true,
            covidZones: null
        });
        fetch("https://api.covid19india.org/zones.json")
            .then(res => res.json())
            .then(
                (result) => {
                    console.log(result.zones, 'zones');
                    this.setState({
                        loading: false,
                        covidZones: result.zones
                    });
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            )
    }

    render() {
        return (
            <React.Fragment>
                <ul>
                    {
                        this.state.covidZones ? this.state.covidZones.map((zone, index) =>
                                <div key={index}>
                                    <div key={index}> District: <span key={index}>{zone.district}</span></div>
                                    <div key={index}> District Code: <span key={index}>{zone.districtcode}</span></div>
                                    <div key={index}> Last Updated: <span key={index}>{zone.lastupdated}</span></div>
                                    <div key={index}> Source: <a key={index} href={zone.source}>source</a></div>
                                    <div key={index}> State: <span key={index}>{zone.state}</span></div>
                                    <div key={index}> State Code: <span key={index}>{zone.statecode}</span></div>
                                    <div key={index}> Zone: <span key={index}>{zone.zone}</span></div>
                                    <hr/>
                                </div>)
                            :
                            null
                    }
                </ul>
            </React.Fragment>
        );
    }
}

以下是输出图像

Answer 2

您正在{this.getZone()}函数中调用api render。恐怕这会导致无限循环，因为在每次调用之后，setState都会被触发，进而调用render函数。

要解决此问题，请执行以下操作： 1.从{this.getZone()}方法中删除render。 2.将其放入componentDidMount

componentDidMount(){
this.getZone()
}

Answer 3

您不应该在getZone()方法内调用render()函数，因为setState()方法会弄脏状态，并且应用程序可能会进入无限渲染循环，并且d反应会抛出错误。因此，您必须在任何生命周期方法中调用它。

Answer 4

看到setState is not a function错误的原因是，在获取的.then函数this中将不再引用该组件。您必须将this与箭头功能绑定，您可以像这样解决setState错误：

 axios.get('https://api.covid19india.org/zones.json')
            .then((response) => {
                this.setState({ covidZones: response.data.zones })
            })
            .catch((error) => {
                // handle error
                console.log(error);
            })
            .finally(()=> {
                // always executed
            })

Answer 5

为您提供3种不同的解决方案。

getZone（）{

    axios.get('https://api.covid19india.org/zones.json')
        .then((response)=> {

            this.setState({ covidZones: response.data.zones })

        })
        .catch((error) =>{
            // handle error
            console.log(error);
        })
        .finally(()=> {
            // always executed
        })
}

或

var self = this;

axios.get('https://api.covid19india.org/zones.json')
        .then(function (response) {

            self.setState({ covidZones: response.data.zones })

        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
        .finally(function () {
            // always executed
        })

或

axios.get('https://api.covid19india.org/zones.json')
            .then(function (response) {

                this.setState({ covidZones: response.data.zones })

            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .finally(function () {
                // always executed
            }).bind(this));

反应原生TypeError：this.setState不是一个函数。''this.setState'未定义）

5 个答案: