React Hooks PUT在单击时从对象请求一个特定字段

Question

如何发出PUT请求并以ONLY patient.status为目标并将其从Active更改为Inactive？我不想改变整个病人，只想改变病人的状态。

请记住，我想使用fetch((，我只是不知道如何只编辑patient.status并通过后端传递它的语法，等等。我们将不胜感激。

我以这种方式从特定患者那里获取数据并声明状态。

const [patient, setPatient] = useState ({})
useEffect(() => {
fetch(`/api/patients/${match.params.id}`)
.then(response => response.json())
.then(json => setPatient(json))
}, [patient])

提交功能。

const onDeactivePatientSubmit = (e) => {
e.preventDefault()
}

按钮。

{ patient.status === "Active" &&
<Button size="small" color="primary" variant="outlined" onClick={onDeactivePatientSubmit} 
value="Inactive">DE-ACTIVATE PATIENT</Button>
}

后端。(请记住，我想保留所需的body.edit患者原样(

router.put('/:id', async (req, res) => {
const {id} = req.params;
await Patient.findByIdAndUpdate(id, {...req.body.editPatient});
console.log(req.body.editPatient)
res.status(200).send({});
})

Answer 1

fetch接受第二个参数，一个选项对象，您可以在其中设置要使用的方法、要发送的数据等。您可以使用排列运算符创建新的/更新的患者对象。它将复制提取的patient对象，并且您可以更新status字段。您可以通过fetch:发送此新对象

const onDeactivePatientSubmit = (e) => {
e.preventDefault()

let updatedPatient = {
...patient,
status: 'Inactive',
}
fetch(`/api/patients/${patient.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
// the data to send
body: JSON.stringify({ editPatient: updatedPatient })
})
.then(res => res.json())
.then(data => {
// check if successfully updated in db
setPatient(updatedPatient)
}