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

lsmd5eda  于 2022-12-12  发布在  React
关注(0)|答案(3)|浏览(514)

我尝试从API获取信息,但useState()无法正常工作。我通过双击每一行获得工作订单网格,然后我应该从特定的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()在父元件中定义。

j9per5c4

j9per5c41#

useState返回的函数不会立即更新状态,而是告诉React将状态更新排队,并且在所有事件处理程序都运行后完成。
重新呈现组件后,您将看到新的状态。
当您在提取之后立即执行console.log时,组件尚未重新呈现,因此您会看到undefined

f87krz0w

f87krz0w2#

Fetch是async,您将console.log()放在它后面,因此此时没有props.details。您可以尝试将openWorkOrder转换为async函数和await以获取结果。

idfiyjo8

idfiyjo83#

React中的useState是一个异步钩子(Reference),当你调用useState时,它不会立即更新状态。
如果要获得更新的状态,必须使用useEffect挂钩。

import { useEffect } from "react";

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

有关React useEffect挂钩的更多详细信息,请参阅documentation
另请参阅setState()方法是否异步?以及Change is not reflectedawait useState in React了解更多详细信息

相关问题