表单编辑无法在onchange中工作

Question

我正在尝试用来自不同表的数据填充表单，并允许用户更新这两个表的数据。我已经填充了表单中的数据，但无法编辑我在映射函数中调用的某些字段的数据。它不允许我更改或添加数据。请参阅表单的最后一个输入元素。

import React, { Fragment, useState, useEffect } from "react";

const ViewPt = ({ pts }) => {
// const [description, setDescription] = useState(todo.description);
const [name, setName] = useState(pts.name);
const [mobile, setMobile] = useState(pts.mobile);
const [email, setEmail] = useState(pts.email);
const [gender, setGender] = useState(pts.gender);
const [dob, setDob] = useState(pts.dob);
const [address, setAddress] = useState(pts.address);
const [treatment, setTreatment] = useState([]);
const [treatment_date, setTreatment_date] = useState("");
const [treatment_done, setTreatment_done] = useState("");
const [cost, setCost] = useState("");
const [paid, setPaid] = useState("");
const [next_appointment, setNext_appointment] = useState("");
const [selectedTreatment, setSelectedTreatment] = useState(false);


//edit patient function
const updatePatient = async(e) => {
e.preventDefault();
try {
const body ={ name,email,mobile,gender,dob,address };
const response = await fetch(`http://localhost:5000/patients/${pts.patient_id}`,{
method: "PUT",
headers: {"Content-Type": "application/json"},
body: JSON.stringify(body)
});
window.location ="/";
} catch (err) {
console.error(err.message);
}
}
//get treatment information
const getTreatment = async() =>{
try {
const response = await fetch(`http://localhost:5000/patients/:id/treatment`)
const jsonData = await response.json();

setTreatment(jsonData);
} catch (err) {
console.error(err.message);
}
}
useEffect(() => {
getTreatment();
},[]);

//function for getting treatment details

const filterTreatmentDetails =async(e) =>{
console.log("__here__1", pts, treatment);
try{
const filtered = treatment.filter(t => pts.patient_id == t.patient_id);
if (
filtered
&& filtered.length > 0
) {
setSelectedTreatment(filtered);
}
console.log(filtered);
console.log("__here__2");
return filtered;
}
catch (err) {
console.error(err.message);
}
}


//edit treatment function
const updateTreatment = async(e) => {
e.preventDefault();
try {
const body ={ treatment_date,treatment_done,cost,paid,next_appointment };
const response = await fetch(`http://localhost:5000/patients/${pts.patient_id}/treatment`,{
method: "PUT",
headers: {"Content-Type": "application/json"},
body: JSON.stringify(body)
});
window.location ="/";
} catch (err) {
console.error(err.message);
}
}
return <Fragment>
<button type="button" class="btn btn-warning" data-toggle="modal" onClick={filterTreatmentDetails} data-target={`#view${pts.patient_id}`}>
Edit
</button>

<div class="modal" id={`view${pts.patient_id}`}>
{/* onClick={() => setDescription(todo.description)} */}
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">Edit Data</h4>
<button type="button" class="close" data-dismiss="modal" >&times;</button>
</div>
<form className="text-left" onSubmit={updatePatient,updateTreatment}>    
<div class="modal-body">
<div class="form-control">
<label for="name">Name &nbsp; </label>
<input type="text" className="form-control" id="name" placeholder="Enter Name" value={name} onChange={e=>setName(e.target.value)}/>
<small></small>
</div>
<div class="form-control" >
<label for="gender">Gender &nbsp; </label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="inlineRadio1" value={gender} onChange ={e =>setGender(`m`)} />
<label class="form-check-label" for="inlineRadio1">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="inlineRadio2" value={gender} onChange ={e =>setGender(`f`)} />
<label class="form-check-label" for="inlineRadio2">Female</label>
</div>
<small></small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" className="form-control" id="email" placeholder="Enter Email" value={email} onChange={e=>setEmail(e.target.value)} />
<small></small>
</div>
<div class="form-control">
<label for="mobile">mobile</label>
<input type="number" className="form-control" id="mobile" placeholder="Enter 10 digit number" value={mobile} onChange={e=>setMobile(e.target.value)}/>
<small></small>
</div>
<div class="form-control">
<label for="dob">Date of Birth</label>
<input type="text" className="form-control" id="dob" placeholder="dob" value={dob}/>
<input type="date" className="form-control" id="dob" placeholder="dob" value={dob} onChange={e=>setDob(e.target.value)}/>
<small></small>
</div>
<div class="form-control">
<label for="address">Address</label>
<input type="text" className="form-control" id="address" placeholder="address" value={address} onChange={e=>setAddress(e.target.value)}/>
<small></small>
</div>
{
selectedTreatment && selectedTreatment.map(subTreatment => (
<div class="form-control" key={subTreatment.treatment_id}>
<label for="treatment">Treatment Done</label>
<input
type="text"
className="form-control"
id="treatment" 
placeholder="Treatment Done" 
value={subTreatment.treatment_done} 
onChange={e=>setTreatment_done(e.target.value)}

/>
<small></small>
</div>
))
}

</div>

<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal" onClick = {e => {updatePatient(e);updateTreatment(e)}}>Edit</button>
{/* <button type="button" class="btn btn-danger" data-dismiss="modal" onClick={() => {setName(patient.name),setEmail(patient.email),setMobile(patient.mobile),setGender(patient.gender),setDob(patient.dob),setAddress(patient.address)}}>Close</button> */}
</div>
</form>


</div>
</div>
</div>
</Fragment>
};
export default ViewPt;

据我所知，以下代码不起作用：

onChange={e=>setTreatment_done(e.target.value)}

我真的很感谢你的帮助！

Answer 1

在挂钩中，您使用的是treatment_done

const [treatment_done, setTreatment_done] = useState("");

但在上次输入中，值使用subTreatment.treatment_done，所以treatment_done在您的状态下，钩子从未使用过。