Question

我正在尝试将打字稿添加到我的项目中，但是我在 IDE 中遇到了 uselocation 错误。知道我做错了什么吗？

import React from "react";
import { useHistory, useLocation, Redirect } from "react-router-dom";
import {ILocation} from '../Interfaces'
import { useSelector } from "react-redux";
import "../App.css";
const Rocket = () => {
  const history = useHistory();
  const location = useLocation<ILocation>();
  const rocketData = location?.data?.rocketDetails;

然后这是我的界面

import { rootReducer } from "./redux/configureStore";

export type RootState = ReturnType<typeof rootReducer>


export interface ILocation {
    data: Object
}

我在 iDE 中遇到的错误是 - 类型“位置”.ts(2339) 上不存在属性“数据”

传递给onCLick组件的数据是这个

<Button
          onClick={() => {
            history.push({
              pathname: `/user/${userData.id}`,
              data: { userDetails: userData },
            });
          }}
        >
          Click here for details
        </Button>

Answer 1

根据the docs，这不是您声明自定义状态的方式。

相反，将状态作为第二个参数传递。

history.push(`/user/${userData.id}`, { data: { userDetails: userData } });

该数据现在将显示在位置的 state 属性上：

const location = useLocation<{ data: { userDetails: MyUserDetailsType } }>()
location.state.data.userDetails // the data you want.

在 useLocation 上设置类型

1 个答案: