我想显示当复选框被选中或状态是1 show checked react js

Question

当复选框状态为1时，我想要这个场景show checked else false。但在我的情况下，当我刷新页面时，它显示选中或当复选框状态为update显示选中，没有页面刷新。这怎么可能?请给我指路。

const [checked, setChecked] = useState(false)
const handleChange = event => {
setChecked(!checked)
const status = event.target.checked?'1':'0'

console.log("status",status)
const headers = {"Access-Control-Allow-Origin": "*", 'Content-Type': 'multipart/form-data'}
const task_id = event.target.getAttribute("data-id");
console.log("taskkkkkk",task_id)

let formData = new FormData()
formData.append('status', status)
formData.append('task_id', task_id)

api.post('task-updated', formData,{headers: headers })
.then((response) => {

if (response.data.status == '1') {
toast.success("Task Updated Successfully");

}
else {
console.log(response.data);
}
});
}
<input type="checkbox" onChange={handleChange} name="status" value={items1._id}  id={items1.status} data-id={items1._id} checked={items1.status== '1'? true:''} />

Answer 1

我不太确定你想要实现什么，但既然你有一个受控的输入，你应该使用checked={checked}来依赖状态。

然后，而不是给checked一个默认值false，你应该这样做:

const [checked, setChecked] = useState(items1.status == '1' ? true : false)

现在您的状态与条件items1.status == '1'的值相匹配，因此您应该使您的代码适应它。

同样，如果你需要在状态值改变时执行一些操作，你应该使用useEffect钩子。

更多的钩子在这里:https://www.w3schools.com/react/react_useeffect.asp