USEPARAM外部反应组件

Question

我正在尝试传递使用UseParam Hook的变量值，以便将其传递到组件函数外部设置的API。

andelcomponent.js：

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";
export const api = async () => {
  try {
    const res = await axios.get(
      // here
      `http://127.0.0.1:8000/api/maintenance/${vesselId}`
    );
    return res.data;
  } catch (error) {
    console.log(error);
  }
};
function VesselComponents() {
  // this line
  const vesselId = useParams();
  const { components, error, loading } = useSelector(
    (state) => state.components
  );
// rest of the code

Answer 1

您可以尝试将param传递到api，可以帮助您从其他位置获得weastelid，包括useparams

export const api = async (vesselId) => {
  try {
    const res = await axios.get(
      // here
      `http://127.0.0.1:8000/api/maintenance/${vesselId}`
    );
    return res.data;
  } catch (error) {
    console.log(error);
  }
};

这就是我们如何称呼它的

const vesselId = useParams();
api(vesselId);

Answer 2

您只能在组件内的顶层使用React钩。您不应在api函数中调用useParams。相反，您应该将其传递到api功能，并使用某些状态存储API的响应。这样的事情：

export const api = async (vesselId) => {
  try {
    const res = await axios.get(
      // here
      `http://127.0.0.1:8000/api/maintenance/${vesselId}`
    );
    return res.data;
  } catch (error) {
    console.log(error);
  }
};

function VesselComponents() {
  // this line
  const vesselId = useParams();
  const [vesselData, setVesselData] = useState();
  const { components, error, loading } = useSelector(
    (state) => state.components
  );

  const fetchVesselData = async () => {
    try {
    const res = await api(vesselId);
    setVessesData(res);
    } catch (e) {
      // handle error
    }
  }

  useEffect(() => {
    fetchVesselData()
  });