时间戳

首页 > 解决方案 > javascript react 从地图中的值设置状态

javascript - javascript react 从地图中的值设置状态

问题描述

const[deleteId,setDeleteId] = useState();

const PatientDeleteVarifiToggle = e =>{
    setDeleteId(e.target.value)//<<<<<--------------------------------THIS
    setDeleteState(true)
}

return (
    <div>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Doctor</th>
                    <th>Emergancy Contact</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {
                    allPatients.map((patient, i)=>{
                        return(
                            <tr>
                                <td key={i}>{patient.firstName} {patient.lastName}</td>
                                <td key={i}>{patient.doctor}</td>
                                <td key={i}>{patient.emergancyContact}</td>
                                <td><Link to={`/patientDetails/${patient._id}`}>Details</Link> | 
                                <p key={i} value={patient._id} onClick={PatientDeleteVarifiToggle}>Remove</p></td> //<<<<<<------------------------THIS
                            </tr>
                        )
                    })
                }
            </tbody>
        </table>

我需要将deleteId状态分配给我正在映射的患者的 ID。我知道它包含我想要的 id，因为我通过在标签patient._id内显示它来测试它p

标签： javascriptreactjsmern

解决方案

对于onClick事件，该value属性将不起作用，它将未定义，但您可以改用该id属性。

const PatientDeleteVarifiToggle = e =>{
  setDeleteId(e.target.id);
  setDeleteState(true);
}

...

<p id={patient._id} onClick={PatientDeleteVarifiToggle}>Remove</p>

此外，对于映射，React 键应该在最外层返回的元素上，tr在这种情况下，因为看起来你正在改变底层数据数组，使用数组索引会导致协调/渲染问题，使用相反id，因为这些在数据集中可能是唯一的并且是稳定的（它们与他们识别的数据保持一致）。

{allPatients.map((patient) => {
   return (
     <tr key={patient._id}>
       <td>{patient.firstName} {patient.lastName}</td>
       <td>{patient.doctor}</td>
       <td>{patient.emergancyContact}</td>
       <td>
         <Link to={`/patientDetails/${patient._id}`}>Details</Link> | 
         <p id={patient._id} onClick={PatientDeleteVarifiToggle}>Remove</p>
       </td>
     </tr>
   )
 })}

推荐阅读