Question

TypeError：无法读取 React 中未定义的属性“params”

2021-08-01

747

reactjs

我是 React 新手，我尝试将 Id 从一个组件传递到另一个组件。为此，我使用了

<a className="btn btn-view" href={`/buyer/viewpostdetails/${posts._id}`}>View Post <i className="fas fa-angle-double-right"></i></a>

此代码。它工作正常，并正确显示了带有 ID 的 URL。

然后我尝试获取该 Id

    componentDidMount(){
            const id = this.props.match.params.id;

            axios.get(`/post/${id}`).then((res) => {
                if (res.data.success) {
                    this.setState({
                        post:res.data.post
                    });
                    console.log(this.state.post);
                }
            });
    }

我使用上述代码执行此操作，但出现错误

TypeError: Cannot read property 'params' of undefined

如何解决此问题？

Answer 1

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { useEffect, useState } from "react";
// import axios from "axios";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" component={FirstPage} exact />
          <Route path="/:id" component={SecondPage} />
        </Switch>
      </Router>
    </div>
  );
}
function FirstPage() {
  const [post, setPost] = useState({ _id: 5 });
  return (
    <div>
      <div>First Page</div>
      <Link to={`/${post._id}`}>Link</Link>
    </div>
  );
}

function SecondPage(props) {
  const [state, setState] = useState();
  useEffect(() => {
    const id = props.match.params.id;
    setState(id);
    // axios.get(`/post/${id}`).then((res) => {
    //   if (res.data.success) {
    //     setState(res.data.post);
    //   }
    // });
  }, []);
  return <div>SecondPage id: {state}</div>;
}

你必须做类似的事情。
首先，你定义一个路由器。
然后，你就可以从相关页面或组件访问 id。
我建议你将组件定义为函数并使用 useEffect 和 useState 钩子。