我的函数计算价格值的总数，但总是落后一步？[重复]

Question

我在我的反应容器中有加减法函数，每当点击跨度'或'-'时都会传递这些函数，以便计算给定不同价格值的三种'产品'的总'价格'。

我的问题是：当我第一次点击任一按钮时，它首先记录初始值0，然后随着每次点击，从总数中增加或减少，但总是落后一步。

例如，如果我点击“苹果，价格：2”，我的控制台记录为0。然后，我将单击“pears，price:5”，我的控制台将记录2，将上一次单击的值相加，而不是将5添加到总数中。

我的加减函数有什么问题吗？我在控制台注销之前更改state.total，那么为什么会发生这种情况呢？

这是我的密码：

class ProductList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            total: 0
        }

        this.addFunction = this.addFunction.bind(this);
        this.subtractFunction = this.subtractFunction.bind(this);
    }

    addFunction(product) {
        var x = Number(product.price)
        this.setState({total: this.state.total + x});
        console.log('total is ' + this.state.total)
    }

    subtractFunction(product) {
        var x = Number(product.price)
        this.setState({total: this.state.total - x});
        console.log('total is ' + this.state.total)
    }

    render() {
        var createProducts = this.props.products.map((product, i) => {
            return <Product 
                    key={i} 
                    title={product.title} 
                    price={product.price}
                    addProductSetUp={() => this.addFunction(product)}
                    subtractProductSetUp={() => this.subtractFunction(product)}
                    />
        });

        return (
            <div>
                <ul>
                   {createProducts}
                </ul>
            </div>
        );
    }
}

Answer 1

setState操作是异步的，并且是为了提高性能而批处理的。这是在setState的留档中解释的：

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

因此，在您的示例中，状态尚未更新。您可以使用回调来检查更新后的状态：

addFunction(product) {
    var x = Number(product.price)
    this.setState({total: this.state.total + x},
      () => console.log('total is ' + this.state.total));

}

但这对你来说不一定有用。您可以简单地打印出计算值

addFunction(product) {
    var x = Number(product.price);
    var total = this.state.total + x;
    this.setState({total});
    console.log('total is ' + total);
}

Answer 2

ReactJS的setState是一个异步操作，这就是为什么您不能立即获得它的最新值。

如果您需要立即访问，您可以使用：

this.setState(prevState => ({
  total: prevState.total + x,
}), () => {
  console.log(this.state)
})