在空数组上使用setState时遇到问题

Question

我在一个空数组上使用setState时遇到了问题。我的状态中有一个空数组，我试图用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()]
    })
   }  
}

在 calc() 函数得到执行。this.state.series 还是一个空数组。我到底做错了什么？先谢谢你

Answer 1

你想要一个方法绑定到 this，并调用this.setState，而不是将this.setState = 。

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

Answer 2

this.setState 是异步的。一旦你调用setState，你的组件将重新渲染

你可以使用setState的回调来获取新的更新状态。

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

Answer 3

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