useState 不会立即通过双击更新状态答案

【问题标题】：useState doesn't update state by double click immediatelyuseState 不会立即通过双击更新状态
【发布时间】：2022-12-12 08:53:36
【问题描述】：

我正在尝试从 api 获取信息，但 useState() 无法正常工作。我有一个工作订单网格，双击每一行我得到工作订单 ID，然后我应该从特定的 api 路由获取信息到“workorder/:id”并显示它们。但是当我尝试通过双击一行来控制台记录信息时，我得到“未定义”

这是我的代码：

  const gridOptions = {
    onRowDoubleClicked: openWorkOrder,
  }
function openWorkOrder(row) {
        const workOrderId = row.data.id
        navigate(`workorder/${workOrderId}`)
        fetch(`baseURL/api/Gages/WorkFlow/GetProductDetailByOrderId?id=${workOrderId}`)
          .then((result) => result.json())
          .then((data) => props.setDetails(data))
        console.log(props.details)
    }

const [details, setDetails] = useState()定义在父组件中。

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

React 中的useState 是一个异步钩子。当您调用 useState 时，它不会立即更新状态。

如果你想获得更新的状态，你必须使用useEffect钩子。

import { useEffect } from "react";


useEffect(() => {
    console.log(details)
},[details]);

有关 React useEffect hook 的更多详细信息，请参阅documentation

【讨论】：