状态上不存在属性 - 使用带有 TypeScript 的 React Router Hooks

Posted 2023-02-22

【中文标题】状态上不存在属性 - 使用带有 TypeScript 的 React Router Hooks

【英文标题】：Property does not exist on state - Using React Router Hooks with TypeScript

【发布时间】：2020-09-10 10:27:24

【问题描述】：

我在使用 react-router-dom hooks + TypeScript 时遇到了一些问题。

试图访问一些状态属性会给出一个错误，说它不存在

参考：

为了继续开发，我必须采取的一种变通方法是将其转换为 any

 const location = useLocation() as any;

如何将有效接口传递给 useLocation 泛型以便在没有警告的情况下访问状态属性？

  useDidMount(() => 
    if (location.state?.newTransactions) 
      scroll.scrollToBottom();
    
  );

【参考方案1】：

useLocation 接受一个确定state 属性类型的通用参数，因此：

const location = useLocation<YourStateTypeHere>();

例如：

interface LocationState 
    newTransactions?: boolean;


// ...
const location = useLocation<LocationState>();

// ...
useDidMount(() => 
    if (location.state?.newTransactions) 
        scroll.scrollToBottom();
    
);

---

我是如何到达那里的（因为我以前没有使用过），以防它有用：我知道大多数钩子的 TypeScript 绑定至少实现一个通用参数，所以当我看到 React Router 的 location 合并时程序员定义的状态，我想它可能接受了一个。因此，我打开了一个使用 React Router 和 TypeScript 的项目，并将鼠标悬停在代码中的 useLocation 上。果然，弹出窗口显示了一个通用参数，该参数应用于state 属性。结果！