Question

我正在购买购物车样品。

每次点击，我都会将项目对象添加到Cart数组中。当我第一次单击添加购物车按钮时，它不会更新购物车，但会在第二次更新。

虽然，当我点击渲染的return语句中的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

仅仅因为您在>>> def matrix(coords): y, x = coords return int (data[x][y]) >>> matrix((2,1)) 4中看不到它并不意味着它无法正确呈现，这里的问题是console.log 异步因此，如果你立即调试它，你就不会看到它（ console.log将在更新状态之前执行），但是如果你仍想记录你的购物车，你可以这样做： / p>

setState

一旦状态更新，setState就会接受一个函数作为回调。

Answer 2

Arber 的解决方案是有道理的，但是当我尝试它时，它产生了一个控制台警告说：

<块引用>

来自 useState() 和 useReducer() 钩子的状态更新不支持第二个回调参数。在之后执行副作用渲染，在组件体中使用 useEffect() 声明。

React：状态不会在第一次点击时更新

2 个答案: