Ошибка типа: Не удается прочитать свойства "параметры" неопределенных в React

#reactjs

Вопрос:

Я новичок в реагировании и пытаюсь передать идентификатор от компонента к другому компоненту. Для этого я использовал

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

этот код. Он работает правильно и правильно отображает URL-адрес с идентификатором.

Затем я попытался получить это удостоверение личности

     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);
                }
            });
    }

Я использовал приведенный выше код, чтобы сделать это, но я получил ошибку

Ошибка типа: Не удается прочитать параметры свойства неопределенного

Как мне решить эту проблему?

1. Это простая ссылка? Как ты думаешь this.props.match.params.id , что это такое? Ты пользуешься react-router ?

2. @ZsoltMeszaros это URL-адрес, который я получил » localhost:3000/buyer/viewpostdetails/60f7d7fbd89c5a1470919a24 «. Я хочу ввести этот идентификатор в указанную выше переменную идентификатора. Вот почему я использовал это «this.props.match.params.id».

3. Можете ли вы показать остальную часть соответствующего кода?

4. @йохананшайнбергер это код, который я использовал для этого constructor(props){ super(props); this.state={ post:{} }; } 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); } }); }

Ответ №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>;
}

Вы должны сделать что-то подобное.
Сначала вы определяете маршрутизатор.
Затем вы можете получить доступ к идентификатору с соответствующей страницы или компонента.
И я предлагаю вам определить компоненты как функции и использовать крючки useEffect и useState.