React+Redux Thunk项目点击表格行传用户ID触发axios请求的实现方案

推荐用路由传参+详情页内发起请求的方案，该方案支持页面刷新、书签保存，是业内通用的标准实现，步骤如下：

步骤1：调整路由配置 #

首先将你的用户详情页路由修改为带参数的动态路由，以react-router v5为例：

// 路由配置处修改
<Route path="/Utilisateurs/:id_user" component={用户详情页组件} />

步骤2：修改列表页行点击逻辑 #

修改DataUsers组件中tr的onClick事件，跳转时携带当前用户ID：

// 先引入依赖
import { useDispatch } from 'react-redux';
import { getUserById } from '你的action文件路径';

function DataUsers() {
  const users = useSelector((state: any) => state.userReducer.infos);
  const now = 60;
  const history = useHistory();
  const dispatch = useDispatch(); // 新增dispatch实例

  return (
    <div className="tableCardDataUsers">
      <Table className="table" bordered hover responsive>
        <thead>
          <tr className="tableHeader">
            <th>ID</th>
            <th>Nom</th>
            <th>Email</th>
            <th>Date de création</th>
            <th>Numéro de téléphone</th>
            <th>Pourcentage</th>
            <th>Catégories</th>
          </tr>
        </thead>
        <tbody>
          {users.slice(0, 20).map((item: any, index: number) => (
            <tr
              className="redirectUser"
              // 修改跳转逻辑，携带用户ID
              onClick={() => history.push(`/Utilisateurs/${item.id}`)}
              // 建议把key改为item.id而非index，避免列表重排时渲染异常
              key={item.id}
            >
              <td>{item.id}</td>
              <td>
                {item.nom} {item.prenom}
                <br></br>Tcheker
              </td>
              <td>{item.email}</td>
              <td>18/10/1998</td>
              <td>{item.tel}</td>
              <td>
                <ProgressBar now={now} label={`${now}%`} />
              </td>
              <td className="tableCategorie">
                <Button
                  name="VDR"
                  name2=""
                  class="catButtonMini"
                  color="orange"
                  onclick={() => {}}
                  type="button"
                  data=""
                  image=""
                />
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

步骤3：在用户详情页获取参数并请求数据 #

在用户详情页组件中，获取路由参数、发起请求、读取store数据渲染即可：

import { useParams, useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { useEffect } from 'react';
import { getUserById } from '你的action文件路径';

function UserDetail() {
  const { id_user } = useParams<{id_user: string}>(); // 读取路由中的用户ID
  const dispatch = useDispatch();
  const history = useHistory();
  // 读取store中的用户数据、加载状态
  const user = useSelector((state: any) => state.userReducer.getUserById);
  const isLoading = useSelector((state: any) => state.userReducer.isLoading); // 替换为你实际存储loading的store字段

  // 组件挂载/用户ID变化时发起请求
  useEffect(() => {
    if(id_user) {
      dispatch(getUserById(id_user));
    } else {
      // 无有效ID时回退到列表页
      history.push('/用户列表页路径');
    }
  }, [dispatch, id_user, history]);

  // 异常/加载态处理
  if(isLoading) return <div>加载中...</div>
  if(!user) return <div>未找到对应用户</div>

  // 正常渲染详情
  return (
    <div>
      <h1>{user.nom} {user.prenom}</h1>
      <p>邮箱：{user.email}</p>
      <p>手机号：{user.tel}</p>
      {/* 其余详情字段渲染 */}
    </div>
  )
}

可选替代方案（不推荐） #

如果不需要支持详情页刷新，也可以在列表页点击时直接发起请求再跳转：

// 列表页tr的onClick修改为
onClick={() => {
  dispatch(getUserById(item.id));
  history.push("/Utilisateurs");
}}

该方案缺点是用户刷新详情页时store数据会丢失，需要额外做持久化处理，仅适合内部临时页面使用。

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