如何使用TypeScript从React Hook返回的对象中降落项目

Question

我有一个需要点击React Router查询参数的组件，并且我使用use-react-router Hook软件包访问它们。

这是我想做的：

import React from "react;
import useReactRouter from "use-react-router";

const Foo = () => {
  const { id } = useReactRouter().match.params;
  return (
    <Bar id={id}/>
  )
}

问题在于，这会在VS代码中引发以下错误，并在编译时丢弃： Property 'id' does not exist on type '{}'.ts(2339)

我发现，如果我像这样重构代码： const id = match.params["id"]，我没有出错，但由于某种原因，我觉得这不是正确的方法。如果有人可以将我指向正确的方向，我会很感激。

Answer 1

我弄清楚了。解决方案是包括钩子的名称和括号之间的角度括号，例如：

const { match } = useRouter<{ id: string }>();
const { id } = useRouter<{ id: string }>();

，或者如果您喜欢嵌套破坏性：

const { match: { params: id } } = useRouter<{ id: string }>();

Answer 2

您可以尝试将默认值给params

const { id } = useReactRouter().match.params || {id: ""};

params可能在初始级别

Answer 3

代码不足。但是，乍一看，

//  right way
const { history, location, match } = useReactRouter()
//  in your case
const { match: { params : { id } } } = useReactRouter()
// or
const { match } = useReactRouter()
const { id } = match.params

现在，尝试首先安装值。另外，请尝试将道具传递给容器的功能组件，因为它更合乎逻辑。

从下面的评论中，我只能假设您解决了它。另外，建议在使用时处理可能的未定义值。

{ id && id }

但是，第一步应该是安慰它是否具有价值，

console.log('value xyz', useReactRouter())