我的功能计算了总价值的总数，但始终落后一步

Question

我在我的反应容器中有添加和减去功能，每当单击跨越' '或' - '被单击时通过，以计算三个产品的总"价格"'有不同的价格值。

我的问题是：当我第一次单击"任一"按钮时，它会控制首先记录初始值0，然后每次点击时，添加或从总计中添加或减去，但始终落后一步。

所以，例如，如果我单击 "苹果，价格：2"，我的控制台日志0。然后，我将单击"梨，价格：5'"，我的控制台将登录2，并在上面添加从上一次点击中的值，而不是将5添加到总数中。

我在添加和减去功能上做错了什么？我更改状态。

这是我的代码：

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

reactjs的 setState是一个异步操作，这就是为什么您没有立即最新值的原因。

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

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

Answer 2

setState动作是异步的，并且被批量划分以获得性能。这在setState的文档中进行了解释：

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-updates-may-be-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);
}