javascript - componentDidMount 同步更新

Question

我正在使用以下方式从保存的 session 中加载数据:

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函数中，this.state.cartItems.length等于0，所以for循环没有执行。我可以在 React 开发工具中看到这个数组有一定的长度。是因为 componentDidMount() 正在同步执行状态变化，不能立即看到更新的数组吗？所以我的问题是如何在数组初始化后更新商品的价格和数量？

Answer 1

您的状态未按顺序更新。为此，您可以将 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),
        });
    }
}

您还可以使用 reduce 显着缩短您的函数:

this.setState({
    cartItems,
    totalPrice: cartItems.reduce((total, item) => total + (item.quantity * item.price), 0),
    totalItems: cartItems.reduce((total, item) => total + item.quantity, 0),
});

您也可以向我们展示您的第二个功能吗？它也可能被优化。 完成。