时间戳

首页 > 解决方案 > 在 React 中，如何显示使用数据库中特定项目的数据的页面

reactjs - 在 React 中，如何显示使用数据库中特定项目的数据的页面

问题描述

在我的数据库中，我有多个练习，我将所有练习都显示在主页中。我希望能够单击“查看练习”按钮以查看有关该练习本身的信息。

App.js 路由代码：

const App = () => {
    return (
      <main>
        <Switch>
          <Route path="/" component={MainPage} exact />
          <Route path="/exercises/:name" component={Exercise} exact/>
          <Route component={Error} />
        </Switch>
      </main>
  );
};

应显示特定练习的代码组件：

import React from "react";

function Exercise(props) {

  return (
    <div>
      <h1>hi {props.name} !</h1>
    </div>
  );
}

export default Exercise;

我如何显示练习列表：

function Exercises() {
  const [exercise, setExercise] = useState([]);

  useEffect(() => {
      const getAPI = async () => {
          const response = await fetch('http://localhost:8080/');
          const data = await response.json();

          try {
              console.log(data);
              setExercise(data);
          } catch (error) {
              console.log(error);
          }
      };
      getAPI();
  }, []);

  return (
    <div>
      <h2 id="exercises">List of Exercises</h2>
      <Row>
        {exercise.map((data) => (
          <ExerciseCard
            key = {data._id}
            name = {data.name}
            img = {data.image}
          />
        ))}
      </Row>
    </div>
  );
}

export default Exercises;

按钮链接：

<Link to= {{
  pathname: `/exercises/${props.name}`
  }}
>

标签： reactjsreact-router

解决方案

如果我正确理解了这个问题，您正在尝试Exercise通过 URL 查询参数将练习名称传递给组件。

在这种情况下，您可以使用useParams来自react-router. 所以组件变成：

import React from "react";
import { useParams } from "react-router";

function Exercise(props) {
  const { name } = useParams();

  return (
    <div>
      <h1>hi {name} !</h1>
    </div>
  );
}

export default Exercise;

并且name参数的名称在路由声明中设置<Route path="/exercises/:name" component={Exercise} exact/>

如果您要显示的数据多于名称，则可以考虑在useEffect钩子内进行 API 调用以获取详细信息。

推荐阅读