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

由 发布于 Androidjavascriptreactjsreact-nativenode.js
 收藏

我正在从开源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>
        )
    }
评论
  • 旗才艺
    旗才艺 回复

    I have prepared an example for your using reactjs. Same technic should be followed in react-native. Please follow this example:

    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>
        );
    }
}

    这是输出中的图像

    enter image description here

  • Lily
    Lily 回复

    You are calling an api {this.getZone()} in the render function. This, I'm afraid, will lead to an infinite loop as after each of those calls, setState will be triggered which in turn will call the render function.

    To fix this: 1. Remove {this.getZone()} from render method. 2. Put this in componentDidMount

    componentDidMount(){
this.getZone()
}