Having trouble using setState on an empty array

Question

I'm having trouble using setState on an empty array. I have an empty array in my state, and I'm trying to populate it from another function using setState.

dataProcessing.js:

const calculate = () => {
    let series = [{
        name: "Sports",
        data: [
            {
                name: "Baseball",
                y: 13
            },
            {
                name: "Football",
                y: 20
            }
    }]

    return series;
  }
  export default calculate;

Main.js:

import calculate from './dataProcessing';

export default class Main extends PureComponent {
  constructor() {
    super();
    this.state = { 
      series: []
    };
  }

  calc = () => {
    this.setState = ({
      series: [... calculate()]
    })
   }  
}

After the calc() function gets executed, this.state.series is still an empty array. What am I doing wrong? Thanks in advance!

Where are you checking this.state.series?

Vivek Doshi
– Vivek Doshi

2020-06-06 04:20:29 +00:00
Commented Jun 6, 2020 at 4:20 — Vivek Doshi
– Vivek Doshi, Commented Jun 6, 2020 at 4:20
I was calling it in the render()

user1893649
– user1893649

2020-06-06 04:28:37 +00:00
Commented Jun 6, 2020 at 4:28 — user1893649
– user1893649, Commented Jun 6, 2020 at 4:28

user120242 · Accepted Answer · 2020-06-06 04:22:10Z

1

You want a method bound to this, and to call this.setState, not to set this.setState =

  calc() {
    this.setState({
      series: [... calculate()]
    })
   }

answered Jun 6, 2020 at 4:22

user120242

15.3k3 gold badges43 silver badges53 bronze badges

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

Comments

hendrixchord · Accepted Answer · 2020-06-06 04:20:44Z

0

this.setState is async. Once you call setState your component will re-render

You can use the callback of setState to get the new updated state.

this.setState = ({
   series: [...calculate()];
}, (newState) => {
   console.log(newState);
});

answered Jun 6, 2020 at 4:20

hendrixchord

5,5045 gold badges33 silver badges44 bronze badges

Comments

Narendra Chouhan · Accepted Answer · 2020-06-06 04:29:47Z

0

dataProcessing.js:

const calculate = () => {
    let series = [{
        name: "Sports",
        data: [
            {
                name: "Baseball",
                y: 13
            },
            {
                name: "Football",
                y: 20
            }
        ]
    }]
    return series;
}
export default calculate;

Main.js:

import calculate from './dataProcessing';

export default class Main extends PureComponent {
    constructor() {
        super();
        this.state = {
            series: []
        };
    }

    calc = () => {
        this.setState = ({
            series: [...calculate()]
        }, () => {
            console.log("series", this.state.series)
        })
    }
}

answered Jun 6, 2020 at 4:29

Narendra Chouhan

2,3091 gold badge17 silver badges25 bronze badges

Collectives™ on Stack Overflow

Having trouble using setState on an empty array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related