如何使用索引號而不是物件的id路由到各個頁面？

我對useParamsExpressJS 還是很陌生，我試圖在單擊帶有個人資料編號的個人資料串列后使用它來顯示詳細的用戶個人資料。用戶組態檔是存盤在陣列中的物件。我試圖在瀏覽器中獲取鏈接以將其顯示為“https://localhost/3000/profile/1”，其中 1 是索引號，而不是像“https://localhost/3000/profile/”這樣的組態檔編號A123"。

資料存盤在 profile.json 中：[{“PROFILE_NUMBER”：“A123”，“NAME”：“X”，“AGE”：“21”，“HOBBY”：“RUN”}，.....]

在 utils.js

const getProfiles = async () => {
  // Retrieve sightings.json file contents as string
  const profiles = await readFile("./profiles.json", "utf8");
  // Return sightings as an object
  return JSON.parse(profiles);
};


module.exports = {
  getProfiles
}

這是我的后端檔案夾中的 index.js

const express = require("express");
const { getProfile } = require("./utils.js");
var cors = require("cors");

require("dotenv").config();

const PORT = process.env.PORT;
const app = express();
app.use(cors());

app.get("/profiles", async (req, res) => {
  const profiles = await getProfile();
  res.json(profiles);
});

app.get("/profiles/:profileIndex", async (req, res) => {
  const profiles = await getProfile();
  res.json(profiles[req.params.profileIndex]);
});

app.listen(PORT, () => {
  console.log(`Express app listening on port ${PORT}!`);
});

另一方面，對于我的前端。這是我的 App.js 從后端呼叫資料的地方：

import React from "react";
import "./App.css";
import Card from "./Card";
import Single from "./Single";
import { Routes, Route } from "react-router-dom";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      profiles: [],
    };
  }

  componentDidMount() {
    fetch("http://localhost:3000/profiles")
      .then((response) => response.json())
      .then((data) => {
        this.setState({ profiles: data });
      });
  }

  render() {
    return (
      <div className="App">
        <Routes>
          <Route
            exact
            path="/profile"
            element={<Card profiles={this.state.profiles} />}
          ></Route>
          <Route
            path="/profiles/:profileIndex"
            element={<Single profiles={this.state.profiles} />}
          ></Route>
        </Routes>
      </div>
    );
  }
}

export default App;

這是我的 Card.js，它是顯示的用戶組態檔串列。

import React from "react";
import "./App.css";
import { Link } from "react-router-dom";

const Card = ({ profiles }) => {
  return (
    <div className="App">
      {profiles.map((profile) => (
        <div className="container">
          <Link
            style={{ display: "block", margin: "1rem 0" }}
            to={`/profiles/${profile.PROFILE_NUMBER}`}
            key={profile.PROFILE_NUMBER}
          >
            <div>
              {profile.PROFILE_NUMBER}
              <br />
              {profile.NAME}
              <br />
            </div>
          </Link>
        </div>
      ))}
    </div>
  );
};

export default Card;

最后，這是顯示個人資料的 Single.js

import React from "react";
import { useParams } from "react-router-dom";
import "./App.css";

const Single = ({ profiles }) => {
  let params = useParams();
 

  var newArray = profiles.filter(function (el) {
    return el.PROFILE_NUMBER === params.profileIndex;
  });

  return (
    <div className="App">
      {console.log(newArray)}
      {`Report Number: ${newArray[0].PROFILE_NUMBER}`}
      <br />
      {`County: ${newArray[0].NAME}`}
      <br />
      {`Year: ${newArray[0].AGE}`}
      <br />
      {`Description: ${newArray[0].HOBBY}`}
    </div>
  );
};

export default Single;

如何獲取鏈接以顯示索引號并顯示正確的用戶組態檔而不是使用組態檔編號？關于如何實作搜索功能的任何指導？謝謝！

uj5u.com熱心網友回復：

如果您希望profileIndex路由路徑引數成為組態檔陣列索引，而不是陣列中元素的特定組態檔編號，則在鏈接中傳遞映射索引，并在profileIndex從陣列中提取組態檔物件時使用引數作為陣列索引。

例子：

const Card = ({ profiles }) => {
  return (
    <div className="App">
      {profiles.map((profile, index) => (
        <div className="container">
          <Link
            style={{ display: "block", margin: "1rem 0" }}
            to={`/profiles/${index}`} // <-- pass array index here
            key={profile.PROFILE_NUMBER}
          >
            <div>
              {profile.PROFILE_NUMBER}
              <br />
              {profile.NAME}
              <br />
            </div>
          </Link>
        </div>
      ))}
    </div>
  );
};

...

const Single = ({ profiles }) => {
  const { profileIndex } = useParams();

  const profile = profiles[profileIndex];

  if (!profile) {
    return "No Profile";
  }

  return (
    <div className="App">
      {`Report Number: ${profile.PROFILE_NUMBER}`}
      <br />
      {`County: ${profile.NAME}`}
      <br />
      {`Year: ${profile.AGE}`}
      <br />
      {`Description: ${profile.HOBBY}`}
    </div>
  );
};

標籤：javascript 反应 表示 反应路由器 反应路由器dom

上一篇：使用字串陣列Mongoose查找檔案$in匹配所有文本案例

下一篇：當我輸入錯誤的憑據時，為什么我的后端會崩潰？