Блог

Я хочу этого «item.id» ценность в «details.js» файл. «item.id» исходит от «application.js» файл.

Вот кодекс «application.js» :

 import React from "react";
import axios from "axios";
import { useEffect, useState } from "react";
import Table from "@material-ui/core/Table";
import { useHistory } from "react-router-dom";
import TableCell from "@material-ui/core/TableCell";
import { Button, TableHead, TableRow } from "@material-ui/core";
import { TableBody } from "@material-ui/core";

const PendingApplication = () => {
  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 amp; 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 onClick={() => handleClick("/detail", `${item._id}`)}>
                  Detail
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

export default PendingApplication;
 

И это кодекс «detail.js» :

 import React from "react";
import axios from "axios";
import { useEffect, useState, useContext } from "react";
import { useHistory, useParams } from "react-router-dom";
import Box from "@mui/material/Box";
import { SetPopupContext } from "../../App";
import { Button, TableRow } from "@material-ui/core";

const Details = () => {
  const { _id } = useParams();
  const [buttonText, setButtonText] = useState("APPROVE");
  const changeText = (text) => setButtonText(text);
  const setPopup = useContext(SetPopupContext);
  let history = useHistory();
  const [data, setData] = useState([]);
  
  useEffect(() => {
    axios
      .get(`http://localhost:5000/api/kam/${_id}`)
      .then((response) => {
        console.log(response);
        setData(response.data.kamData);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div className="content">
      <Button onClick={() => changeText("APPROVED")}>{buttonText}</Button>
      <Button>Revert Back</Button>
      <Button>Reject</Button>
      <Box
        sx={{
          width: "90%",
          padding: "24px 20px", // theme padding
          border: "1px solid rgba(0, 0, 0, 0.12)",
          borderRadius: 4,
        }}
      >
        <div className="ticket-details">
          <h3>TICKET DETAILS</h3>

          <TableRow>
            <p>Ticket ID: {data.ticketno}</p>
            <p>Category: {data.approvecategory}</p>
            <p>Category: {data.subcategory}</p>
            <p>Category: {data.date}</p>
          </TableRow>
        </div>
        <div className="additional-info">
          <h3>ADDITONAL INFO</h3>

          <TableRow>
            <p>Company Name: {data.companyname}</p>
            <p>KCP Name: {data.kcpname}</p>
            <p>KCP Contact No: {data.kcpcontact}</p>
            <p>KCP NID No: {data.kcpnid}</p>
            <p>No of MSISDN: {data.msisdn}</p>
          </TableRow>
        </div>
      </Box>
    </div>
  );
};

export default Details;
 

В основном в «application.js» файл Я извлекаю все данные и показываю эти данные в таблице, когда пользователь нажимает кнопку «подробно», она должна содержать значение «item._id» и перенаправлять на «detail.js» файл. В «detail.js» файл У меня есть «axios .get( http://localhost:5000/api/kam/${_id} )» это API, который я создал в бэкэнде. Мне нужны данные по определенному идентификатору, конкретный идентификатор исходит от «application.js» файл.

Вот API для извлечения данных по идентификатору:

 router.get("/kam/:id", (req, res) => {
  console.log(req.params.id);
  kamForm
    .findById(req.params.id)
    .then((result) => {
      res.status(200).json({
        kamData: result,
      });
    })
    .catch((err) => {
      console.log(err);
      res.status(500).json({
        message: err,
      });
    });
});
 

Я застрял с этой проблемой в течение последних трех дней, кто-нибудь может это исправить?

ваша handleClick(location) функция принимает только один параметр, поэтому ее следует вызывать следующим образом

 <Button onClick={() => handleClick(`/detail/${item.id}`)}>
   Detail
</Button>
 

вы не читаете идентификатор в обратном вызове handleClick

В application.js —

 const handleClick = (location,id) => {
        history.push({
  pathname: '/location',
  search: '?_id=id'
})
};