当给组件状态赋值时，为什么console.log 会打印之前的状态? [英] When value is assigned to components state, why console.log prints the previous state?

问题描述

我正在将数字值从 Numbers 组件发送到 Main 组件.一切正常，直到我在我的 Main 组件中将该值设置为该组件的状态.

var Numbers = React.createClass({句柄点击:函数(编号){this.props.num(number)},渲染:函数(){返回 (<div><button onClick={this.handleClick.bind(null, 1)}>1</button><button onClick={this.handleClick.bind(null, 2)}>2</button><button onClick={this.handleClick.bind(null, 3)}>3</button>

)}})var Main = React.createClass({getInitialState: 函数(){返回 {数量:0}},句柄回调:函数(数量){console.log("数字就在这里:" + num);this.setState({数量:数量})console.log("但是这里错了(以前的数字):" + this.state.number)},渲染:函数(){返回 (<Numbers num={this.handleCallback}/>//<SomeComponent number={this.state.number}/>)}});React.render(

, document.getElementById('container'));

为什么会这样?handleCallback 函数中的第二个 console.log 打印前一个数字，而不是 num 参数中的数字.我需要正确的数字才能处于我的状态，因为我将立即将其作为 SomeComponent 组件中的道具发送.

https://jsfiddle.net/69z2wepo/13000/

解决方案

来自 文档:

<块引用>

setState() 不会立即改变 this.state 而是创建一个待处理的状态转换.调用 this 后访问 this.state方法可能会返回现有值.没有保证调用 setState 和调用的同步操作可能进行批处理以提高性能.

如果您想在调用 setState 后打印更改，请使用可选的回调参数:

this.setState({数量:数量}， 功能 () {console.log(this.state.number);});

I'm sending values of numbers from Numbers component to Main component. Everything is working fine until I set that value in my Main component to that component's state.

var Numbers = React.createClass({
    handleClick: function(number){
        this.props.num(number)
    },
    render: function(){
        return (
            <div>
                <button onClick={this.handleClick.bind(null, 1)}>1</button>
                <button onClick={this.handleClick.bind(null, 2)}>2</button>
                <button onClick={this.handleClick.bind(null, 3)}>3</button>
            </div>
        )
    }
})

var Main = React.createClass({
    getInitialState: function(){
        return {
            number: 0
        }
    },
    handleCallback: function(num){
        console.log("number is right here: " + num);
        this.setState({
            number: num
        })
        console.log("but wrong here (previous number): " + this.state.number)
    },
    render: function() {
        return (
            <Numbers num={this.handleCallback} />
            //<SomeComponent number={this.state.number} />
        )
    }
});

React.render(<Main />, document.getElementById('container'));

Why is it behaving like this? Second console.log in handleCallback function prints the previous number, not the number which is in num parameter. I need right number to be in my state, because I'm going to send it immediately as an props in my SomeComponent component.

https://jsfiddle.net/69z2wepo/13000/

解决方案

From the docs:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

If you want to print the change after a call to setState, use the optional callback parameter:

this.setState({
    number: num
}, function () {
    console.log(this.state.number);
});

这篇关于当给组件状态赋值时，为什么console.log 会打印之前的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！