javascript - 类型 void 上不存在属性

Question

我正在编写一个钩子(Hook)来发出一个返回两个属性的 post 请求，sessionId 和 sessionData。我在一个组件中使用这个钩子(Hook)。我的钩子(Hook)看起来像这样。

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 时，我收到错误消息，指出 sessionDta 在 void 类型上不存在。但是如果我检查控制台上的日志，我会在组件和 Hook 上得到相同的对象。此外，如果我检查我的组件的数据类型，我会得到一个对象。

为什么会出现此错误？

Answer 1

您不会从您的 catch block 中返回任何内容，因此您的函数的返回类型是 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)
  }
}

Playground

我创建的示例中的类型可能不同(您需要从代码中替换为实际类型)，但您应该明白了。您可以通过以下任一方法解决此问题:

1. 从 catch block 中明确返回正确类型的内容。
2. 将返回类型更改为 Promise<CorrectType | undefined> .
3. 按照评论中 goto1 的建议将错误处理移至调用方。

另请注意，正如 goto1 在对该问题的评论中指出的那样，您的钩子(Hook)实际上并不是一个钩子(Hook)(这很好，但要注意术语)。