Question

我在反应容器中添加和减去函数，只要跨越＆＃39; +＆＃39;或者＆＃39; - ＆＃39;点击，以计算总价格＆＃39;三种产品＆＃39;给出不同的价格值。

我的问题是：当我第一次点击任一按钮时，控制台首先记录初始值0，然后随后每次点击，添加或减去总数，但总是落后一步。

所以，例如，如果我点击+为'苹果，价格：2＆＃39;，我的控制台会记录0.然后，我点击“梨”，价格：5＆＃39 ;和我的控制台将记录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是asynchronous操作，这就是为什么你没有立即获得它的最新价值。

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

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

我的函数计算总价值，但总是落后一步？

2 个答案: