我正在撰寫一個鉤子來發出一個回傳兩個屬性sessionId和sessionData的 post 請求。我在一個組件中使用這個鉤子。我的鉤子看起來像這樣。
export const createOrder = async () => {
try {
const response = await postWithToken(API_ROUTES.PAYMENT_SESSION, token || '',
testObject)
console.log("FROM HOOK", response)
return response
} catch (err: any) {
console.log(err)
}
}
我的組件看起來像這樣
const myComponent = () => {
useEffect(() => {
createOrder().then(data => {
console.log("Session Data",data.sessionData)
console.log("FROM PAGE", data)
})
}, [])
return (
<div />
)
}
當我嘗試訪問組件上的 data.sessionData 時，我收到了型別 void 上不存在 sessionDta 的錯誤。但是如果我檢查控制臺上的日志，我會在組件和鉤子上得到相同的物件。此外，如果我檢查我的組件型別資料，我會得到一個物件。
為什么我收到這個錯誤？
uj5u.com熱心網友回復：
你不會從你的 catch 塊回傳任何東西，所以你的函式的回傳型別是Promise<WhateverTheTypeOfResponseIs | void>（NBasync函式隱式回傳一個 Promise，如果你的postWithToken函式沒有回傳任何東西，那么它只是Promise<void>），這取決于發生的代碼路徑。
將來，通過為函式提供顯式回傳型別，您可以避免在除錯此類問題時出現令人不快且略有問題的情況，在這種情況下，編譯器會通知您違反了您的期望：
const postWithToken = async (route: string, token: string, obj: any): Promise<boolean> => {
try {
const resp = await fetch(
route,
{
method: 'POST',
body: JSON.stringify(Object.assign(obj, { token }))
},
)
return Boolean(resp.status < 400 && resp.status >= 200)
} catch (err) {
console.error(err)
return false
}
}
const API_ROUTES = {
PAYMENT_SESSION: 'whatever'
}
const testObject = {
token: ''
}
const token = ''
const createOrder = async (): Promise<boolean> => { // <-- squiggles
try {
const response = await postWithToken(API_ROUTES.PAYMENT_SESSION, token || '',
testObject)
console.log("FROM HOOK", response)
return response
} catch (err: any) {
console.log(err)
}
}
操場
我創建的示例中的型別可能不同（您需要使用代碼中的實際型別進行細分），但您應該明白這一點。您可以通過以下任一方式解決此問題：
- 從 catch 塊中顯式回傳正確型別的內容。
- 將您的回傳型別更改為
Promise<CorrectType | undefined>. - 按照 goto1 在注釋中的建議，將錯誤處理移至呼叫方。
另請注意，正如 goto1 在對該問題的評論中指出的那樣，您的鉤子實際上并不是一個鉤子（這很好，但請注意術語）。
uj5u.com熱心網友回復：
這聽起來像是一個TypeScript問題，所以我建議為您的createOrder函式提供正確的回傳型別。
// Use the official type for SessionData, if you have it available,
// otherwise create a new type that properly matches its shape
type CreateOrderResult = {
sessionData: SessionData;
}
// No need for `async/await` here, just return the `postWithToken`
// and handle errors inside your component
export const createOrder = (): Promise<CreateOrderResult> => {
// ...
return postWithToken(
API_ROUTES.PAYMENT_SESSION,
token || '',
testObject
)
}
// MyComponent.tsx
const MyComponent = () => {
useEffect(() => {
createOrder()
.then(data => console.log(data.sessionData))
.catch(error => /* handle errors appropriately */)
}, [])
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/396757.html
標籤：javascript 打字稿 异步 钩