如何将此 item.id 值传递给 axios.get('http://localhost:5000/api/kam/:Id')

Question

我有一个名为“application.js”的页面。我从数据库中获取所有数据的地方。我有另一个名为 "detail.js" 的页面。我想通过单击 "application.js" 中的“DETAIL”按钮重定向到哪里。进入“detail.js”我必须通过 ID 获取数据。 ID 必须是我从 "application.js" 文件中单击的特定项目。我想要“item.id”值而不是 /:id 到 axios.get('http://localhost:5000/api/kam/:Id').

如您所见，"application.js" 中的数据是如何表示的。当我点击“DETAIL”按钮时，它应该带有 item.id 值。

这是 "application.js":

的代码

const PendingApplication = () => {
  //const { job } = props;
  let history = useHistory();
  const [data, setData] = useState([]);
  const handleClick = (location) => {
    console.log(location);
    history.push(location);
  };

  useEffect(() => {
    axios
      .get("http://localhost:5000/api/kam")
      .then((response) => {
        console.log(response);
        setData(response.data.kamData);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div className="content">
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Ticket No</TableCell>
            <TableCell align="right">Category</TableCell>
            <TableCell align="right">Sub Category</TableCell>
            <TableCell align="right">Request Time & Date</TableCell>
            <TableCell align="right">Company Name</TableCell>
            <TableCell align="right">Action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((item, index) => (
            <TableRow key={index}>
              <TableCell>{item.ticketno}</TableCell>
              <TableCell>{item.approvecategory}</TableCell>
              <TableCell>{item.subcategory}</TableCell>
              <TableCell>{item.date}</TableCell>
              <TableCell>{item.companyname}</TableCell>
              <TableCell>
                <Button
                  color="#71BD44"
                  onClick={() => handleClick(`/detail/${item.id}`)}
                >
                  Detail
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

export default PendingApplication;

当您点击此按钮时，它将在浏览器中准确显示 ID 地址。

<Button color="#71BD44" onClick={() => handleClick(`/detail/${item.id}`)}>
  Detail
</Button>

但我想将此 ${item.id} 值放入此 axios 而不是 :id:

useEffect(() => {
  axios
    .get("http://localhost:5000/api/kam/:id")

    .then((response) => {
      console.log(response);
      setData(response.data.kamData);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);

此useEffect代码来自“detail.js”。

谁能帮帮我？怎么做？

Answer 1

假设 Details 组件可以访问 id 路由匹配参数，您可以使用字符串模板“注入” id 值。

useEffect(() => {
  axios.get(`http://localhost:5000/api/kam/${id}`)
    .then((response) => {
      console.log(response);
      setData(response.data.kamData);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);

如果您正在使用 react-router-dom，那么您可以使用 generatePath 实用程序生成 GET 请求 URL。

import { generatePath } from 'react-router-dom';

...

useEffect(() => {
  axios.get(generatePath("http://localhost:5000/api/kam/:id", { id }))
    .then((response) => {
      console.log(response);
      setData(response.data.kamData);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);

要访问 id 路由匹配参数，请导入 useParams React 挂钩。

import { useHistory, useParams } from 'react-router-dom';

...

const { id } = useParams();

Answer 2

 useEffect(() => {
        let { id } = useParams();
        axios
            .get(`http://localhost:5000/api/kam/${id}`)

            .then((response) => {
                console.log(response);
                setData(response.data.kamData);
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);

如何将此 item.id 值传递给 axios.get('http://localhost:5000/api/kam/:Id')

How to pass this item.id value into axios.get('http://localhost:5000/api/kam/:Id')

javascript

node.js

reactjs

mern