从用空对象初始化的 React useState 调用方法时打字稿抱怨

Question

在主 App 组件中，我有一个事件处理程序，它将 onSubmit 和 onClose 回调传递给 onOpenDialog 函数

App.ts

const App = () => {
  const { onOpenDialog, onCloseDialog } = useDialog()
  
  const onOpenModal = () => {
    // Open the Dialog and pass callbacks
    onOpenDialog({
      onSubmit: (data: any) => {
        // ... CRUD operation
        onCloseDialog()
      },
      onCancel: onCloseDialog
    })

  return <button onClick={onOpenModal}>Open</button>
}

onOpenDialog 函数来自 useDialog 钩子，它在 Dialog 状态中存储回调。

此状态使用空对象 ({}) 初始化。它在模式打开时填充，并在模式关闭时重置为其初始值 ({})。

useDialog.ts

const useDialog = () => {
  const [open, setOpen] = useState<boolean>(false)
  const [dialogState, setDialogState] = useState<object>({})

  const onOpenDialog = (config?: object): void => {
    setOpen(true)
    if (isObject(config) && !isEmpty(config)) {
      setDialogState(config!)
    }
  }
  
  const onCloseDialog = (): void => {
    setOpen(false)
    if (!isEmpty(dialogState)) {
      setDialogState({})
    }
  }
}

最后，我有一个用于导出两个处理程序（onSubmit 和 onCancel）的模态表单组件的钩子，这两个处理程序将在模态表单组件中调用

useModalForm.ts

const useModalForm = () => {
  const { dialogState } = useDialog()

  const onSubmit = (data: any) => {
    dialogState.onSubmit(data) // Property 'onSubmit' does not exist on type 'object'
  }

  return {
    onSubmit: onSubmit,
    onCancel: dialogState.onCancel,
  }
}

我不能调用 dialogState.onSubmit(data) 因为打字稿抱怨 onSubmit 类型不存在 'object' （我理解）

我如何 - 在 Typescript 中 - 将 initial/closed 状态设置为 {} 并用打开模式时传递的任何回调或数据填充它。

我尝试使用预期状态的签名接口键入 useState，但是当我关闭模态时，我无法将 dialogConfig 重置为 {} Typescript 不会抱怨。

Answer 1

我遇到了同样的问题并尝试了同样的解决方案。这是我在 React+TypeScript Cheatsheets:

中找到的内容

方法一

为预期状态创建类型，然后“明确声明类型，并使用联合类型”。

type IDialogState = { /* Describe the shape of your state */ };

const [dialogState, setDialogState] = React.useState<IDialogState | null>(null);

方法二

“如果状态在设置后很快被初始化并且在之后始终有一个值，您也可以使用类型断言：”

type IDialogState = { /* Describe the shape of your state */ };

const [dialogState, setDialogState] = React.useState<IDialogState>({} as IDialogState);

“这暂时 'lies' TypeScript 编译器认为 {} 是 IDialogState 类型。您应该通过设置用户状态来跟进——如果您不这样做，您的代码的其余部分可能依赖于事实上，用户属于 IDialogState 类型，这可能会导致运行时错误。"

来源：React+TypeScript Cheatsheets （变量名改编）

从用空对象初始化的 React useState 调用方法时打字稿抱怨

Typescript complaining when calling a method from React useState initialized with an empty object

typescript

reactjs

use-state

方法一

方法二