我的函数计算了总价格值，但总是比实际结果慢一步？

22 浏览
0 Comments

我的函数计算了总价格值，但总是比实际结果慢一步？

我在我的React容器中有加法和减法函数，当点击"+"或"-"时，这些函数会传递进来，以便计算给定不同价格值的三个产品的总价。我的问题是：当我第一次点击任何一个按钮时，它会先在控制台打印出初始值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('总价是 ' + this.state.total)
    }
    subtractFunction(product) {
        var x = Number(product.price)
        this.setState({total: this.state.total - x});
        console.log('总价是 ' + this.state.total)
    }
    render() {
        var createProducts = this.props.products.map((product, i) => {
            return  this.addFunction(product)}
                    subtractProductSetUp={() => this.subtractFunction(product)}
                    />
        });
        return (
                
    
                   {createProducts}
                

        );
    }
}

0

2 答案

0 Comments

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

解决方法是使用回调函数，以确保在状态更新完成后再进行下一步操作。具体来说，可以使用带有回调函数的setState，并在回调函数中打印出更新后的状态。

代码示例：

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

通过使用这种方式，你可以确保在状态更新后获取到最新的值。

感谢，这个解决方法非常完美。

0
0 Comments

在React中，使用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);
}

问题的出现原因是setState的异步性质导致的，解决方法是使用回调函数或者直接打印出计算后的值。

0