我尝试从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()
在父元件中定义。
3条答案
按热度按时间j9per5c41#
useState
返回的函数不会立即更新状态,而是告诉React将状态更新排队,并且在所有事件处理程序都运行后完成。重新呈现组件后,您将看到新的状态。
当您在提取之后立即执行
console.log
时,组件尚未重新呈现,因此您会看到undefined
。f87krz0w2#
Fetch是
async
,您将console.log()
放在它后面,因此此时没有props.details
。您可以尝试将openWorkOrder
转换为async
函数和await
以获取结果。idfiyjo83#
React中的
useState
是一个异步钩子(Reference),当你调用useState时,它不会立即更新状态。如果要获得更新的状态,必须使用
useEffect
挂钩。有关React useEffect挂钩的更多详细信息,请参阅documentation
另请参阅setState()方法是否异步?以及Change is not reflected和await useState in React了解更多详细信息