反应：第一次点击时状态不更新答案

【问题标题】：React: state not updating on first click反应：第一次点击时状态不更新
【发布时间】：2018-08-11 21:05:51
【问题描述】：

我正在处理购物车示例。

每次单击时，我都会将项目的一个对象添加到 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>
    )
}

【问题讨论】：

标签： javascript reactjs jsx setstate

【解决方案1】：

在console.log 中看不到它并不意味着它不会正确渲染，这里的问题是setState 是异步，因此如果您立即 console.log （console.log 将在状态更新之前执行），但如果您仍想记录您的购物车，您可以这样做：

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

setState 在状态更新后接受一个函数作为回调。

【讨论】：

感谢您，这是 react 的众多方面之一，这些方面会让您认为自己有错误并导致您浪费时间尝试修复。在现实中，你必须确保你总是在异步思考！

【解决方案2】：

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

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

【讨论】：

这里也一样，我收到了同样的警告。可能这个解决方案只适用于类组件。