Javascript 组件安装同步更新

我正在使用以下命令从保存的会话加载数据：

componentDidMount() {
    if (JSON.parse(localStorage.getItem('savedData')) !== null) {
        this.setState({
            cartItems: JSON.parse(localStorage.getItem('savedData')),
            totalPrice: this.getPriceOnLoad(),
            totalItems: this.getItemsOnLoad(),
        });
    }
}

cartItems

是一个对象数组。这似乎是以前更新过的

this.getPriceOnLoad();
this.getItemsOnLoad();

调用函数，例如

this.getPriceOnLoad

函数：

getPriceOnLoad() {
    let itemsPrice = 0;
    for (let i = 0; i <= this.state.cartItems.length - 1; i++) {
        itemsPrice += this.state.cartItems[i].quantity * this.state.cartItems[i].price;
    }
    return itemsPrice;
}

getPriceOnLoad（）{
设itemsPrice=0；
对于（设i=0；i您的状态未按顺序更新。为此，您可以将
cartItems
存储在临时值中，并将其发送给每个函数：

componentDidMount() {
    if (JSON.parse(localStorage.getItem('savedData')) !== null) {
        const cartItems = JSON.parse(localStorage.getItem('savedData'))
        this.setState({
            cartItems, //Short syntax for 'cartItems: cartItems'
            totalPrice: this.getPriceOnLoad(cartItems),
            totalItems: this.getItemsOnLoad(cartItems),
        });
    }
}

您还可以通过使用以下工具使功能显著缩短：

您能给我们看一下您的第二个函数吗？它可能也经过了优化。完成。
getPriceOnLoad（）
在执行此.setState之前执行。因此，您不能在
getPriceOnLoad（）
中引用
此.state

调用
this.setState（{}）
时，JS首先需要为
setState（）
函数生成对象。表示您引用的函数首先运行，然后是
this.setState（）

在任何情况下，
this.setState（）
是一个异步函数，因此执行
setState（）
后，
this.state
不直接可用。
错误的做法是试图在函数上使用状态值来定义状态

有两种方法可以解决此问题：

1） 使用
setState
中的回调函数，然后使用新数据再次设置状态（我认为这不是最好的方法）

2） 将值发送到函数

componentDidMount() {
    if (JSON.parse(localStorage.getItem('savedData')) !== null) {
        const savedCartItems = JSON.parse(localStorage.getItem('savedData'))
        this.setState({
            cartItems,
            totalPrice: this.getPriceOnLoad(savedCartItems),
            totalItems: this.getItemsOnLoad(savedCartItems),
        });
    }
}

getItemsOnLoad（）{let itemsQuantity=0；for（let i=0；谢谢您的帮助，但我遇到了另一个类似的问题。当我更新我的购物车时，（只是一个向数组添加另一个对象的函数），并调用
const cartims=this.state.cartims；this.setState（{cartims，totalPrice:cartims.reduce(（total，item）=>total+（item.quantity*item.price），0），totalItems:cartItems.reduce（（total，item）=>total+item.quantity，0），}）；
它看起来像是
cartItems
还没有更新。所以它不计算最新的项目。这对我来说没有意义，因为您的解决方案与我尝试这样做的方式相同。
componentDidMount() {
    if (JSON.parse(localStorage.getItem('savedData')) !== null) {
        const cartItems = JSON.parse(localStorage.getItem('savedData'))
        this.setState({
            cartItems
        }, ()=> {
           this.setState({
            totalPrice: this.getPriceOnLoad(cartItems),
            totalItems: this.getItemsOnLoad(cartItems),
           });
        })
    }
}

componentDidMount() {
    if (JSON.parse(localStorage.getItem('savedData')) !== null) {
        const savedCartItems = JSON.parse(localStorage.getItem('savedData'))
        this.setState({
            cartItems,
            totalPrice: this.getPriceOnLoad(savedCartItems),
            totalItems: this.getItemsOnLoad(savedCartItems),
        });
    }
}