javascript - react : undefined the state of `this.setState` instantly

Question

为什么如果我在 this.setState 之后调用 console log 以获取 componentWillMount 中的相同状态，我会得到未定义

这个例子将解释问题

    constructor(props){
        super(props);
        this.state = {
            total: 100,
            length: null,
            number: null,
        }
    }
    componentWillMount(){
        let JSONFetchedNumber = 30.20;
        this.setState({length: JSONFetchedNumber});
        console.log(this.state.length);// getting Null response


        let collect = this.state.total/this.state.length;
        let result = collect.toFixed(0)/1+1;
        this.setState({number: result});// This won't work cus length state in undefined
    }
  render() {
        console.log(this.state.length);// getting 30.20 Successfully

为什么我无法在 componentWillMount 中立即使用 this.setState 的状态？它仅在渲染中有效

我尝试使用componentDidMount它不起作用。仅在渲染工作中，我的问题是我无法在渲染中使用 this.state

Answer 1

this.setState 是一个异步函数。您正尝试在状态更新之前访问它。因此，无论您想对状态进行什么操作，都可以在回调函数中完成。

this.setState({length:JSONFetchedNumber},()=>{
  //Your code which is using state
  console.log(this.state)
})