如何更新状态？

Question

I am trying to update state with API.

I tried to update API state with using setouttime,

in render(), there is if statement which if timepassed is true, this.get_bus will be called to update state. However I got warning cannot update during an existing state transition

Please let me know how to update...

this is my code.

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

Here's why you would get that error: When you update state, you use

this.setState({ ... });

However, this.setState({ ... }) method will call render() method when the state has been updated. Therefore, you're repeatedly calling render() as you update states in it before the return block.

If I get it right, you want to call get_bus() every 10 seconds. Look at the following example first, in this example, I have state:

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

Where timer is a timer, it will call the function we want to execute every time some seconds have passed, and we use counter to count how many seconds have passed, look at the code below:

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;

As you can see, in componentDidMount() , we use setInterval() method to set up our timer. setInterval() methods takes 2 arguments, the first argument is the function you wish to execute, the second argument is the interval in milliseconds, this is what the app looks like:

In your case, if you wish to call get_bus() every 10 seconds, simple change the two arguments to this.get_bus(...) and 10000