**大家好，我現在在 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。
謝謝！！！
uj5u.com熱心網友回復：
你只需要一個id。當您在此行的檔案中id映射專案時，您可以得到這個。MyProjectList.jspaginatedProject.map((user, _id) => ()
只需projectid從用戶那里獲取，然后onClick像這樣發送它：
onCLick = {(e) => onRowClick(e, user.projectId)}
uj5u.com熱心網友回復：
如果我是你，我會在這種情況下使用反應背景關系，因為你的問題是使用反應背景關系的含義；React 背景關系是一種通用狀態，您可以輕松地在所有組件中設定或編輯或使用您的通用狀態
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/437514.html
標籤：javascript mysql 节点.js 反应 表示