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

【问题标题】：My function calculates a total of price values, but is always one step behind? [duplicate]我的函数计算总价格值，但总是落后一步？ [复制]
【发布时间】：2018-05-24 16:18:13
【问题描述】：

我的反应容器中有加减函数，只要单击跨度“+”或“-”就会传递这些函数，以计算三个“产品”的总“价格”，这些“产品”具有不同的价格值。

我的问题是：当我第一次单击任一按钮时，它会首先在控制台中注销初始值 0，然后每次单击都会从总数中添加或减去，但总是落后一步。

因此，例如，如果我点击“苹果，价格：2”的 +，我的控制台记录 0。然后，我将点击“梨，价格：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>
        );
    }
}

【问题讨论】：

标签： javascript reactjs function react-redux

【解决方案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);
}

【讨论】：

【解决方案2】：

ReactJS 的 setState 是一个 asynchronous 操作，这就是为什么你没有立即获得它的最新值。

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

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

【讨论】：

谢谢，这太完美了。