数组返回类型出现自定义React Hook typescript错误

Question

我创建了一个非常简单的自定义挂钩：

export function useI18n() : [ string, Dispatch<SetStateAction<string>> ] {
const [ language, setLanguage ] = useState<string>(i18n.language)
useEffect(() => {
i18n.changeLanguage(language)
}, [ language ])
return [ language,  setLanguage ];
}

在我的组件中，我使用这样的钩子：

const [language, setLanguage] = useI18n();

我使用的是react脚本，当我执行npm start时，我会得到以下内容：

Failed to compile.
./src/config/i18n.ts
Line 0:  Parsing error: Cannot read property 'map' of undefined

然而，如果我设置挂钩返回Object而不是Array，则不会发生此错误，如下所示：

export function useI18n() : { language: string, setLanguage: Dispatch<SetStateAction<string>> } {
const [ language, setLanguage ] = useState<string>(i18n.language)
useEffect(() => {
i18n.changeLanguage(language)
}, [ language ])
return { language,  setLanguage };

在这种情况下，我这样称呼它：

const { language, setLanguage } = useI18n();

有人知道为什么返回数组会导致编译失败吗？也许我犯了一个奇怪的错误。提前谢谢。

Answer 1

我遇到了类似的问题，我得到了另一位程序员的建议，为return添加as const

return [language, setLanguage] as const