this.state return empty array when render

Question

I wanted to display the array series and when I tried to console the array this.state.series in the function it does has the result and the value inside but when I render this.state.series just keep giving empty array. I wonder is it because of the componentDidMount()?

constructor(props){
        super(props);
        this.state={series:[]}
      }

    GetTransaction=()=> {
       
        var APIURL="http://10.0.2.2:80/api/getTransaction.php";

        var headers={
            'Accept':'application/json',
            'Content-Type':'application.json'
        }


        fetch(APIURL,
            {
                method:'POST',
                headers: headers,
                
            })
        .then((response)=>response.json()) 
        .then((response)=>
        {
            
            this.setState({results:response});
            
             this.state.results[0].map((a) => {
                
            this.state.series.push(a.count)
            });
            
            console.log(this.state.series)
        })   
        .catch((error)=>
        {
            alert("Error"+error);
        }
        ) 
       
       
    }
    
    componentDidMount(){ // runs after the component output has been rendered to the DOM
        this.GetTransaction();
    }
    

    render(){
          
        console.log(this.state.series)

output

Array []
Array []
Array []
Array []
Array []
Array []
Array []
Array [
  "1",
  "2",
  "1",
  "1",
]

Giovanni Esposito · Accepted Answer · 2021-09-07 07:36:34Z

1

There are basically 2 errors in GetTransaction state assignment:

you can't read a state just assigned because this.setState is async. If you want to get the very last value of state you should use this.setState's callback:
```
this.setState({results:response}, () => {
   console.log(this.state.result); //<-- here you have the very last value of result
});
```
state must be always setted with this.setState: this.state.series.push(a.count) is not good.

So you have to rewrite your code in this way:

        ...
        this.setState({results:response}, () => {
            let seriesAppo = [];
            this.state.results[0].map((a) => {
                seriesAppo.push(a.count);
            });
            this.setState({series: seriesAppo}, () => {
               console.log(this.state.series);
            })      
        });
        ...

answered Sep 7, 2021 at 7:36

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Unknown Over a year ago

may I know why there are empty array before the array with value?

Giovanni Esposito Over a year ago

@Unknown if you mean why state array is empty and after a while will be filled is because GetTransaction makes a fetch (so it takes time to response and in this time state is empty). Then fetch returns value and you call setState but also this is async and takes time to set state. Finally the state will be filled and you start to see correct values. Is just a matter of async calls that, as I told you, are taking time to be resolved. It's totally normal.

Giovanni Esposito Over a year ago

@Unknown No problem. Have a nice coding =)

marc_s · Accepted Answer · 2021-10-02 18:12:39Z

1

That‘s weird

   this.state.results[0].map((a) => {                
     this.state.series.push(a.count)
   });

Don‘t manipulate state that way, only with setState.

      const series = response[0];
      this.setState({series: series});

Even if you wanna add elements to an array you have to recreate the array. You can achieve this as follows:

     const series = response[0];
     this.setState({series: […this.state.series, …series]});

edited Oct 2, 2021 at 18:12

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 7, 2021 at 7:24

Michael Bahl

3,7091 gold badge15 silver badges20 bronze badges

Collectives™ on Stack Overflow

this.state return empty array when render

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related