反應：第一次點擊狀態不更新

Question

我正在研究購物車樣本。

每次單擊時，我都會將項目的一個對象添加到 Cart 數組中。 當我第一次點擊添加購物車按鈕時，它不會更新購物車，但會在第二次時更新。

雖然，當我在渲染的返回語句中單擊 viewCart 按鈕時，它顯示了購物車中的准確項目數。 請參閱下面的代碼：

我需要能夠在不單擊 viewCart 按鈕的情況下查看購物車中准確的商品數量。 產品來自本地的 JSON 文件，所以我認為加載 JSON 文件沒有任何問題。

constructor (props) {
    super(props);
    this.state = {
        Cart: []
    };
    this.addItem = this.addItem.bind(this);
}

addItem(productKey) {
    this.setState({ Cart: [...this.state.Cart, ProductsJSON[productKey]]})
    console.log(this.state.Cart);
}

viewCart() {
    console.log(this.state.Cart);
}

render() {
  const AllProducts = ProductsJSON;

  var Products = AllProducts.map((item) => {
    return (
            <div className="col-4" key={item.key} >
                <a onClick={() => this.addItem(item.key)} className="btn btn-primary btn-sm">Add to Cart</a>
            </div> 
        )
})

return (
        <div className="container">
            <div className="row">
                {Products}
                <a onClick={() => this.viewCart()} className="btn btn-primary btn-sm">viewCart</a>
            </div>
        </div>
    )
}

Answer 1

僅僅因為你沒有在console.log中看到它並不意味着它不會正確呈現，這里的問題是setState是異步的，因此如果你立即 console.log 就不會看到它（ console.log 會在更新狀態之前執行），但是如果你仍然想記錄你的購物車，你可以這樣做：

this.setState(
   { Cart: [...this.state.Cart, ProductsJSON[productKey]] },
   () => console.log(this.state.Cart)
)

狀態更新后，setState 接受一個函數作為回調。

Answer 2

Arber 的解決方案是有道理的，但當我嘗試它時，它產生了一個控制台警告說：

來自 useState() 和 useReducer() Hook 的狀態更新不支持第二個回調參數。 要在渲染后執行副作用，請使用 useEffect() 在組件主體中聲明它。