React JS中如何在跳转页面渲染点击组件的对应数据

1. 传递查询标识到详情页 #

修改QueriesView组件中详情按钮的导航逻辑，将当前行的querynumber作为路由参数传递：

// 替换原按钮代码
<td>
  <button type="button" onClick={() => navigate(`/details/${ele.querynumber}`)}>
    Details
  </button>
</td>

同时修复QueriesView中下拉选择框的小问题：将value={status.value}改为value={status}，因为status是直接存储的字符串状态值，而非对象。

2. 配置路由接收参数 #

在路由配置文件（如App.js）中，为详情页路由添加参数占位符：

import { Routes, Route } from 'react-router-dom';
import QueriesView from './QueriesView';
import Details from './Details';

function App() {
  return (
    <Routes>
      <Route path="/" element={<QueriesView />} />
      {/* 添加带参数的详情页路由 */}
      <Route path="/details/:queryNumber" element={<Details />} />
    </Routes>
  );
}

3. 在详情页获取参数并加载数据 #

修改Details组件，使用useParams获取路由参数，然后请求数据并渲染详情：

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

const Details = () => {
  const { queryNumber } = useParams();
  const [queryDetails, setQueryDetails] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchDetails = async () => {
      try {
        // 请求查询数据，根据queryNumber筛选对应记录
        const response = await fetch(`https://script.google.com/macros/s/AKfycbykZx2qtz39U5j8TwDRVuziKfoLzF6YkYvDL6Ejoj822Vg9MPe1pDS9PX86IeP1Kzw82Q/exec?request=getQueriesData`);
        const data = await response.json();
        const targetQuery = data.find(item => item.querynumber === queryNumber);
        
        if (!targetQuery) throw new Error("未找到该查询记录");
        
        setQueryDetails(targetQuery);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchDetails();
  }, [queryNumber]);

  // 处理加载、错误、空数据状态
  if (loading) return <div className="container mt-4">加载中...</div>;
  if (error) return <div className="container mt-4 text-danger">错误：{error}</div>;
  if (!queryDetails) return <div className="container mt-4">查询记录不存在</div>;

  // 渲染详情内容
  return (
    <div className="container mt-4">
      <h2>查询详情</h2>
      <div className="card">
        <div className="card-body">
          <div className="row mb-3">
            <div className="col-sm-3"><strong>查询编号：</strong></div>
            <div className="col-sm-9">{queryDetails.querynumber}</div>
          </div>
          <div className="row mb-3">
            <div className="col-sm-3"><strong>提交日期：</strong></div>
            <div className="col-sm-9">{queryDetails.querydate}</div>
          </div>
          <div className="row mb-3">
            <div className="col-sm-3"><strong>用户姓名：</strong></div>
            <div className="col-sm-9">{queryDetails.firstname} {queryDetails.lastname}</div>
          </div>
          <div className="row mb-3">
            <div className="col-sm-3"><strong>邮箱：</strong></div>
            <div className="col-sm-9">{queryDetails.email}</div>
          </div>
          <div className="row mb-3">
            <div className="col-sm-3"><strong>联系电话：</strong></div>
            <div className="col-sm-9">{queryDetails.contact}</div>
          </div>
          <div className="row mb-3">
            <div className="col-sm-3"><strong>状态：</strong></div>
            <div className="col-sm-9">{queryDetails.querystatus}</div>
          </div>
          {/* 可根据API返回的其他字段继续添加详情内容 */}
        </div>
      </div>
    </div>
  );
};

export default Details;

补充说明 #

• 如果你的后端提供了单独的详情API（比如通过queryNumber直接获取单条记录），建议替换fetch的URL为该接口，这样比请求全部数据再筛选更高效。
• 可以根据需求添加更多状态处理（比如加载动画、错误重试按钮等）。

内容的提问来源于stack exchange，提问作者Kuldeep Singh