如何将项目ID传递给react.js中的另一个组件

Question

**大家好，我在 MyProjectList.js 文件中创建一个表，用于显示我现在想要的项目数据，如果用户单击表行，那么我想将此单击的项目 ID 传递到 Collection.js 文件以在查询中使用进行比较。

*这是 MyProjectList.js 文件。

import React from "react";
import { useEffect, useState } from "react";
import { Table } from "react-bootstrap";
import axios from "axios";
import _ from "lodash";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";

const pageSize = 10;
export default function MyProjectsList() {

  let navigate = useNavigate();
  const [projects, setProjects] = useState();
  const [paginatedProject, setPaginatedProject] = useState();
  const [currentPage, setCurrentPage] = useState(1);

  const userState = useSelector(state=> state.loginUserReducer)
  const {currentUser} =userState;

  const coordinatorId = currentUser.id;

  useEffect(() => {
   axios.post("http://localhost:4000/coordinatorsProjects",
   {
     coordinatorId : coordinatorId
    }).then((res) => {
      console.log(res.data,'==>>> this is coordinator projects');
      setProjects(res.data);
      setPaginatedProject(_(res.data).slice(0).take(pageSize).value());
    });
  }, [coordinatorId]);

  const pageCount = projects ? Math.ceil(projects.length / pageSize) : 0;
  const pages = _.range(1, pageCount + 1);

  const pagination = (pageNo) => {
    setCurrentPage(pageNo);
    const startIndex = (pageNo - 1) * pageSize;
    const paginatedProject = _(projects)
      .slice(startIndex)
      .take(pageSize)
      .value();
    setPaginatedProject(paginatedProject);
  };


//***using this function i am nevigate user to colletion.js component. how to pass project id this?

  const onRowClick = async (e) =>  {
   navigate("/coordinators/collection")
   console.log(e)
  }
  return (
    <>
      <div className="container">
        {/* {loading && (<Loading/>)} */}
        {/* {error && alert("Error occured to get data")} */}
        {!paginatedProject ? (
          "ERROR: Data Not Found. Please check your internet connection!"
        ) : (
          <Table className="table table-hover table-light  table-bordered shadow">
            <thead className="thead-dark">
              <tr>
                <th scope="col">Project Name</th>
                <th scope="col">Start Date</th>
                <th scope="col">End Date</th>
                <th scope="col">Budget Rs.</th>
                <th scope="col">Remaining Rs.</th>
              </tr>
            </thead>
            <tbody>
              {paginatedProject.map((user, _id) => (
                <tr onClick={ onRowClick } key={_id}>
                  <td>{user.projectName}</td>
                  <td>{user.startDate}</td>
                  <td>{user.endDate}</td>
                  <td>{user.budget}</td>
                  <td>{user.remaining}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        )}

        <nav className="d-flex pagination justify-content-center ">
          <ul className="pagination ">
            {pages.map((page) => (
              <li
                className={
                  page === currentPage ? "page-item active" : "page-item"
                }
              >
                <p className="page-link" onClick={() => pagination(page)}>
                  {page}
                </p>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </>
  );
}

*这是 Collection.js 文件。

import React from 'react';
import { useEffect, useState } from "react";
import { Table } from "react-bootstrap";
import axios from "axios";
import _ from "lodash";

const pageSize= 10;

export default function Collection () {
  const [donors, setDonors] = useState()
  const [paginatedDonors, setPaginatedDonors] = useState()
  const [currentPage, setCurrentPage] = useState(1)

  useEffect(() => {
    axios.post("http://localhost:4000/coordinatorsCollection",
    {
      projectID : "7"
     }).then((res)=>{

    console.log(res.data);
    setDonors(res.data);
    setPaginatedDonors(_(res.data).slice(0).take(pageSize).value());
   
  }); 
  }, []);

  const pageCount= donors? Math.ceil(donors.length/pageSize) :0;
  const pages = _.range(1, pageCount+1)

  const pagination= (pageNo) =>{
    setCurrentPage(pageNo)
    const startIndex = (pageNo -1) * pageSize;
    const paginatedDonors = _(donors).slice(startIndex).take(pageSize).value();
    setPaginatedDonors(paginatedDonors)
  }

    return (
        <>
      <div className='container'>
      <h3 align="center">Collection of users</h3>
     {/* {loading && (<Loading/>)} */}
     {/* {error && alert("Error occured to get data")} */}
     {!paginatedDonors ? ("ERROR: Data Not Found. Please check your internet connection!"):(
        <Table className="table table-hover table-light  table-bordered shadow">
          <thead className="thead-dark">
            <tr>        
              <th scope="col">Donor Name</th>
              <th scope="col">Contact No</th>
              <th scope="col">Amount</th>
              <th scope="col">Project</th>
              <th scope="col">Project Budget</th>
              <th scope="col">Donate Date.</th>
            </tr>
          </thead>
          <tbody >
      
              {paginatedDonors.map((donors, id) => (
                  <tr key={id}>
                      
                      <td>{donors.name}</td>
                      <td>{donors.mobileNo}</td>
                      <td>{donors.amount}</td>
                      <td>{donors.project}</td>
                      <td>{donors.projectBudget}</td>
                      <td>{donors.donateDate}</td>
                   
                  </tr>
              ))}
          </tbody>
        </Table>
        )}

 <nav  className="d-flex pagination justify-content-center ">
  <ul className="pagination ">
  
    {
      pages.map((page)=>(
        <li className={
          page === currentPage ? "page-item active" : "page-item"
        }>
          <p className="page-link"
          onClick={()=>pagination(page)}
          >{page}</p></li>
      ) )
    }
  </ul>
</nav>
          </div> 
        </>
    )
};

暂时我将“7”（硬编码）发送到 API 进行检查，它工作正常。但我想在其中单击项目 ID。

谢谢！！！

Answer 1

您只需要一个 id。当您在 MyProjectList.js 文件中的此行映射项目时，您可以获取此 id paginationProject.map((user, _id) => ()

只需从用户处获取 projectid ，然后将其发送到 onClick 中，如下所示

onCLick = {(e) => onRowClick(e, user.projectId)}

Answer 2

如果我是你，我会在这种情况下使用 React context，因为你的问题是使用 React context 的含义； React 上下文是一种通用状态，您可以轻松地在所有组件中设置、编辑或使用通用状态