显示模态中的最后一个用户

Question

我需要这段代码的帮助。这是一个在屏幕上显示用户的网站，右边的按钮应该以模式打开用户信息的详细信息。我无法获取我点击的用户的信息，以显示在模态中。给我看最后一个。

网页照片网站首页

模态的Foto

这是我的代码

import { Modal } from "antd";
import 'antd/dist/antd.css';
import { useEffect, useState } from "react"
import { userApi } from "../api/userApi";
import { Usuario } from "../interfaces/fetchAllUserResponse";

export const List = () => {
const [users, setUsers] = useState<Usuario[]>([]);
const [currentPage, setCurrentPage] = useState(0);
const [isModalOpen, setIsModalOpen] = useState(false);


useEffect(() => {
// call API
userApi.get<Usuario[]>('/default/techJobMission')
.then( resp => {
setUsers( resp.data );
})
.catch( console.log )

}, []);
const filteredUsers = (): Usuario[] => {
return users.slice(currentPage, currentPage + 6);
}
const nextUser = () => {
setCurrentPage( currentPage + 5 )
}
const prevUser = () => {
if( currentPage > 0 ){
setCurrentPage( currentPage - 5 )
};
}

const renderItem = ({ _id, firstName, lastName, ticket, present }: Usuario) => {

const openModal = () => {

setIsModalOpen(true)

}
const handleOk = () => {
setIsModalOpen(false);
};

const handleCancel = () => {
setIsModalOpen(false);
};
return (

<tr key={ _id }>

<td >
{( present ? <img className="ticket" src="icons/ticket-green.svg"/> : <img className="ticket" src="icons/ticket-red.svg"/>)}
</td>

<td className="user">
<p className="encabezado">{firstName } {lastName}</p>
{( present ? <p className="estado">Ha entrado</p> : <p className="estado">No ha entrado</p> )}
</td>

<td className="id-user">
<p className="encabezado2">ID</p>
<p className="estado">{_id}</p>
</td>

<td className="ticket-td">
<p className="encabezado2">Nº de ticket</p>
<p className="estado">{ticket + 1}</p>
</td>

<td>
<button onClick={openModal} className="btn-modal"> <img src="icons/menu-modal.svg"/> </button> 
<Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel} >
<p>{firstName}</p> 
</Modal>
</td>

</tr>

)
}

return (
<>

<table className="table">
<tbody>
{
filteredUsers().map( renderItem )
}  
</tbody>

</table>        


<br />

<button onClick={ prevUser } className="paginacion">
<img src="icons/anterior.svg"/> Anterior
</button>

<button onClick={ nextUser } className="paginacion">
Siguiente <img src="icons/siguiente.svg"/> 
</button>

</>
)
}

Answer 1

它正在打开所有模态。

您有多个模态和

一个与其跟踪单个布尔值，不如跟踪要显示的模式的标识符。例如：

const [modalID, setModalID] = useState();

和：

const openModal = (id) => {
setModalID(id)
}
const handleCancel = () => {
setModalID(undefined);
};

然后将id传递给您记录中的函数：

onClick={() => openModal(_id)}

并使用它来确定模态是否打开：

open={modalID === _id}