Question

我正在尝试使用API更新状态。

我尝试使用setouttime

更新API状态在render（）中有if语句，如果timepasssed为true，则会调用this.get_bus来更新状态。但是，在现有状态转换期间，我收到警告无法更新

请告诉我如何更新......

这是我的代码。

export default class App extends React.Component {

constructor(){
super()
this.state = {
  station1: [],
  station2: [] ,
  timePassed:false,
}

}



get_BUS(code,station){
return fetch('https://transportapi.com/v3/uk/bus/stop/'+code+'/live.json?
app_id=6ab4b5a0&app_key=7693c12908e7d566351e3610b4acfa9f
&group=route&nextbuses=yes')
.then((response) => response.json())
.then((responseJson) => {
 for(var x in responseJson.departures){
this.setState({
state : this.state[station].push(responseJson.departures[x][0]["line"],": 
",responseJson.departures[x][0]["aimed_departure_time"]," ")
 });


}



})

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

componentWillMount(){
this.get_BUS('01000053207','station1')
this.get_BUS('01000053207','station2')
this.setTimePassed(false)    
}
setTimePassed(abc) {
this.setState({timePassed: abc});
 }

render() {
 .....

let that = this;
setTimeout(function(){
  that.setState({timePassed: true})}, 10000);

if(this.state.timePassed){
console.log("HI update")
this.get_BUS('01000053207','station1')
this.get_BUS('01000053207','station2')
this.setTimePassed(false)
}

return (
......

）

Answer 1

这就是为什么你会得到这个错误：当你更新状态时，你使用

this.setState({ ... });

但是，this.setState({ ... })方法会在状态更新后调用render()方法。因此，当您在render()阻止之前更新其中的状态时，您会反复调用return。

如果我做对了，你想每10秒拨一次get_bus()。首先看下面的例子，在这个例子中，我有状态：

this.state = {
    timer: null,
    counter: 0
};

其中timer是一个计时器，它会在每次经过几秒后调用我们想要执行的函数，并且我们使用counter来计算已经过了多少秒，请看下面的代码：

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

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            timer: null,
            counter: 0
        };

        this.tick = this.tick.bind(this);
    };

    // Set up our timer here
    componentDidMount() {
        let timer = setInterval(this.tick, 1000);
        this.setState({ timer });
    }

    // Add 1 to counter for every second passed
    tick() {
        this.setState({ counter: this.state.counter + 1 });
    }

    render() {
        return (
            <View style={{ ... }}>
                <Text style={{ ... }}>
                    {this.state.counter}
                </Text>
            </View>
        );
    }
}

export default App;

如您所见，在componentDidMount()中，我们使用setInterval()方法设置我们的计时器。 setInterval()方法有2个参数，第一个参数是你想要执行的函数，第二个参数是以毫秒为单位的间隔，这就是应用程序的样子：

在您的情况下，如果您希望每10秒拨打get_bus()，只需将两个参数更改为this.get_bus(...)和10000

如何更新状态？

1 个答案: