当我想将数据从功能组件传递到类组件时出现错误 -React Typescript

Question

我有一个名为

roleCategory.tsx

（功能组件）的页面，我正在使用

Navigate

将名为

FromPage

的值传递到另一个名为

Home.tsx

（类组件）的页面，这是我的代码：

roleCategory.tsx

：

    import React from "react";
    import DataTable from "../../reusables/DataTable/DataTable";
    import { GridColDef } from "@mui/x-data-grid";
    import { useEffect, useState } from "react";
    import { useNavigate } from "react-router-dom";

    import AuthService from "../../../services/auth.service";


    const columns: GridColDef[] = [
      { field: "id", headerName: "RoleID", width: 150 },
      { field: "role_category", headerName: "Role Category", width: 150 },
      { field: "description", headerName: "Description", width: 150 },
    ];

    const RoleCategory = () => {
    const [roles, setRoles] = useState([]);
    const [err, setErr] = useState(false);
    const [isUserValid, setisUserValid] = useState(false);
  
  
    const currentUser = AuthService.getCurrentUser();

    // Check if the user token is valid
    if (currentUser) {
      AuthService.validateKey(currentUser.access).then((value) => {
      if (value === 200) {
        setisUserValid(true);
      } else {
        setisUserValid(false);
      }
      });
    }
     const navigate = useNavigate();

    useEffect(() => {
    
    if (!currentUser || !isUserValid) {
      
      navigate("/home", { state: { fromPage: "roleCategory" } });

    } 
    
    }, []);
 
    return (
    <div className="title">
      <div className="card-title card-title-set-container">Role Category</div>
      <div className="card-grid card-grid-set-container">
        
        <DataTable rows={roles} columns={columns} loading={!roles.length} />
      </div>
     </div>
      );
     };

    export default RoleCategory;

---

这是我的

home.tsx

：

    import { Component } from "react";
    import "bootstrap/dist/css/bootstrap.min.css"
    import "./home.css"



    type Props = {};

    type State = {
     content: string;
    }

    export default class Home extends Component<Props, State> {
     constructor(props: Props) {
      super(props);

     this.state = {
      content: ""
      };
     }

     componentDidMount() {
     const value = this.props.location?.state?.fromPage
     console.log("Here is the value passed from RoleCategory Page" , value)
     }

    render() {
    
    return (
      <div >
        <header className="main-body">
          
        </header>
      </div>
    );
     }
    }

---

但是我在这里遇到打字稿错误：

this.props.location?.state?.fromPage

这么说：

类型

location

.ts(2339)

 上不存在属性 

Readonly<Props>

我尝试使用

useLocation()

钩子，但在类组件中不允许使用。

Answer 1

可能有两个问题：

1. 您正在使用react-router-dom（版本低于v6）并且没有用

   withRouter

   包装您的组件。

2. 您正在使用react-router-dom，其中

   withRouter

   不存在。如果您需要它，这里有一个[快速破解]。

import {
  useLocation,
  useNavigate,
  useParams,
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}