我正在编写一个钩子来发出一个post请求，该请求返回两个属性，sessionId和sessionData。我正在组件中使用此挂钩。我的钩子看起来像这个。
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。但是，如果我检查控制台上的日志，我会在组件和钩子上得到相同的对象。此外，如果我在我的组件上检查数据的类型，我会得到一个对象。
为什么我会出现这个错误？
您的catch块不返回任何内容，因此函数的返回类型为Promise<WhateverTheTypeOfResponseIs | void>(注意，async函数隐式返回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)
}
}
游乐场
我创建的示例中的类型可能不同(您需要使用代码中的实际类型进行sub(，但您应该了解这个想法。您可以通过以下任何一种方法解决此问题：
- 从catch块显式返回正确类型的内容
- 将您的退货类型更改为
Promise<CorrectType | undefined> - 按照注释中goto1的建议，将错误处理移动到调用者
还要注意，正如goto1在对该问题的评论中指出的那样，你的钩子实际上不是钩子(这很好，但要注意术语(。
这听起来像是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 */)
}, [])
}
打开tsconfig.json文件更改
"严格的"：真，
进入
"严格的"：错误，
这通常适用于我
结账https://v2.vuejs.org/v2/guide/typescript.html获取更多信息