react native TypeError: this.setState is not a function.'this.setState' is undefined)

Question

我从开源 api 获取 json。 我想将其存储为 state。 无法将 json 数据存储在 state 中。 我需要使用这个 json 数据来匹配一个城市与 json 中的一个城市。 我需要将它存储在 state 中。 会非常有用。 请帮忙！

构造函数部分

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)

}

Function 零件

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

这是 output 中的图像

Answer 2

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

要解决这个问题： 1. 从render方法中删除{this.getZone()} 。 2.把这个放到componentDidMount

componentDidMount(){
this.getZone()
}

Answer 3

您不应该在您的render()方法中调用getZone() function，因为setState()方法会弄脏您的 state 并且应用程序可能会在 Z34D1F91FB2E514B8576FAB1A75A89A6 上渲染一个无限循环错误。 因此，您必须在任何生命周期方法中调用它。

Answer 4

您看到setState is not a function错误的原因是，在您的 fetch 中。然后.then this将不再引用该组件。 您必须将this与箭头 function 绑定，您可以像这样修复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 种不同的解决方案适合您。

获取区域（）{

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