React如何将useParams获取的路由参数传递给组件外API函数

模块级作用域定义的api函数，访问不到组件函数内部通过useParams声明的vesselId——后者是组件作用域的局部变量，外部作用域天然读不到，才会报vesselId未定义。
另外你代码里useParams的写法也有问题：它返回的是所有路由参数组成的对象，你直接把整个对象赋值给vesselId，就算作用域对了，拼到URL里的也是[object Object]，必须解构取对应字段。

方案1：给API函数增加入参（最推荐，耦合度最低） #

直接修改外部的api函数，让它接收vesselId作为入参，组件里拿到路由参数后，调用时传进去即可，改完的代码参考：

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchComponents } from "../../../features/componentsSlice";
import TreeItem from "@mui/lab/TreeItem";
import TreeView from "@mui/lab/TreeView";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { Link, Outlet, useParams } from "react-router-dom";
import axios from "axios";

// 组件外的API函数增加vesselId入参
export const api = async (vesselId) => {
  try {
    const res = await axios.get(
      `http://127.0.0.1:8000/api/maintenance/${vesselId}`
    );
    return res.data;
  } catch (error) {
    console.log(error);
  }
};

function VesselComponents() {
  // 从useParams返回的对象里解构出vesselId字段
  const { vesselId } = useParams();
  const { components, error, loading } = useSelector(
    (state) => state.components
  );

  // 调用时传入vesselId即可，比如在副作用里触发请求
  useEffect(() => {
    if (!vesselId) return;
    api(vesselId).then(res => {
      // 自定义返回逻辑，比如dispatch存入redux
    })
  }, [vesselId])

  // 其余业务代码
}

这种写法的好处是API函数和React逻辑完全解耦，复用性最高，不管在哪个组件调用，只要传对应参数就行，不会和组件、Hook绑定死。

方案2：把API函数挪到组件内部（仅适合单组件复用场景） #

如果这个请求逻辑只会在当前组件使用，也可以直接把函数挪到组件作用域内，就能直接访问到同作用域下的vesselId：

function VesselComponents() {
  const { vesselId } = useParams();
  const { components, error, loading } = useSelector(
    (state) => state.components
  );

  // 函数挪到组件内部，直接访问作用域内的vesselId
  const fetchMaintenanceData = async () => {
    try {
      const res = await axios.get(
        `http://127.0.0.1:8000/api/maintenance/${vesselId}`
      );
      return res.data;
    } catch (error) {
      console.log(error);
    }
  };

  // 其余业务逻辑，直接调用fetchMaintenanceData()即可
}

这种写法的缺点是每次组件重渲染都会重新创建该函数，且其他组件无法复用这段请求逻辑，只适合完全不需要跨组件复用的临时请求场景。

• 路由配置必须提前声明:vesselId动态段，比如路由规则要写成/vessel/:vesselId/components这种格式，否则useParams拿不到对应值
• 组件首次渲染时路由参数可能还未完成初始化，要加vesselId非空判断再发请求，避免把undefined拼到请求路径里
• 不要在普通工具函数、API服务文件里直接调用React Hook，Hook只能在组件函数或自定义Hook内部调用

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