javascript反应从地图中的值设置状态

如何解决javascript反应从地图中的值设置状态

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。我知道 patient._id 包含我想要的 id，因为我通过在 p 标签中显示它进行了测试

解决方法

您无法使用 e.target.value 访问 p 标记的 value 属性，如果您需要该值，您可以使用 getAttribute。

但我建议将该值作为参数传递给 PatientDeleteVarifiToggle 函数。

我删除了 p 标记上的 value 属性，并使用内联箭头函数将其作为参数传递。

<p key={i} onClick={() => PatientDeleteVarifiToggle(patient._id)}>
  Remove
</p>

我还稍微修改了 PatientDeleteVarifiToggle 函数。

const PatientDeleteVarifiToggle = (val) => {
    setDeleteId(val);
    setDeleteState(true); //<<<<<--------------------------------THIS
}

,

<p key={i} value={patient._id} onClick={PatientDeleteVarifiToggle}>Remove</p>

您将值作为 p 标记的属性传递。所以你必须使用 getAttribute("YOUR ATTR NAME") 来访问值

你在做什么

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

此处 e.target.value 返回 undefined，因此您的状态设置不正确

如果你想做你正在做的事情

const PatientDeleteVarifiToggle = e =>{
    setDeleteId(e.target.getAttribute("value"))
    setDeleteState(true)
}

常见且简单的方法是 因为您可以访问地图函数内的 patient._id。你可以像这样设置状态..

<p key={i} value={patient._id} onClick={() => {
    setDeleteId(patient._id);
    setDeleteState(true);
}}>Remove</p>

,

对于 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>
   )
 })}