反应：立即取消定义“ this.setState”的状态

Question

为什么我越来越不确定，如果我叫console log后this.setState在相同的状态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的回调中。 这应该工作，

this.setState({length: JSONFetchedNumber}, ()=> console.log(this.state.length););

Answer 2

this.setState是一个异步函数。 您正在尝试访问它，然后再更新状态。 因此，无论您要对状态进行何种操作，都可以在回调函数中进行操作。

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

Answer 3

您不应在JavaScript中将length用作关键字，我很确定这是您的错误。

var.length是javascript中的工具，用于获取变量的实际长度，那里一定有冲突。