类型 void 上不存在属性

Question

我正在编写一个钩子来发出一个返回两个属性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 时，我收到错误消息，指出 sessionDta 在类型 void 上不存在。 但是，如果我检查控制台上的日志，我会在组件和挂钩上得到相同的 object。 此外，如果我检查我的组件的 typeof 数据，我会得到一个 object。

为什么我会收到此错误？

Answer 1

您不会从 catch 块中返回任何内容，因此 function 的返回类型是Promise<WhateverTheTypeOfResponseIs | void> Promise<WhateverTheTypeOfResponseIs | void> （NB async函数隐式返回 Promise，如果您的postWithToken function 没有返回任何内容，那么它只是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)
  }
}

操场

我创建的示例中的类型可能不同（您需要使用代码中的实际类型进行细分），但您应该明白这一点。 您可以通过以下任何方式解决此问题：

1. 从 catch 块中显式返回正确类型的内容。
2. 将您的返回类型更改为Promise<CorrectType | undefined> Promise<CorrectType | undefined> 。
3. 按照注释中 goto1 的建议，将错误处理移至调用者。

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

Answer 2

这听起来像是TypeScript问题，所以我建议为您的createOrder function 提供正确的返回类型。

// 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 */)
  }, [])
}

Answer 3

打开 tsconfig.json 文件并更改

“严格”：真实，

进入

“严格”：假的，

这通常对我有用

查看https://v2.vuejs.org/v2/guide/typescript.html了解更多信息