获取复选框之前的状态React

Question

我正在开发一个 React 前端项目，用户可以在其中填写表单字段（包括文本框、复选框和选择框）。场景如下： 在初始状态下，用户填写姓名、年龄和国籍，并选中复选框。 单击“保存”后，所有输入的数据将保存为 JSON 文件，并以变量名称存储。 这些值通过 End Point /read-value/ 存储在后端 稍后，当用户想要重新填写字段时，他们从下拉列表中选择一个名称。 目标是根据 JSON 数据中选择的姓名自动填充表单字段（姓名、年龄、国籍、单身）。

我面临的问题是，即使其他文本字段按预期填充，但复选框没有按预期填充，复选框值在 JSON 文件中保存为 true，但在重新填写表单时不会自动检查。

如何确保重新填写表单时复选框状态反映 JSON 数据中保存的值？

我尝试了这段代码：

function SaveForm({ selectedName }){
  const [formData, setFormData] = useState({
    name: '',
    nationality: '',
    age: '',
    single: false,  
  });
  const [isSelected, setIsSelected] = React.useState(false);

  const fetchDefault = async () => {
    const response = await fetch(${apiUrl}/read-value/);
    const newData = await response.json();
    
    setResults(newData.results)
   
  };
  
  useEffect(() => {
    setFormData(prevState => ({
      ...prevState,
      
      ["name"]: selectedName,
    
    }));
   fetchDefault()
   // setFormData(formData.name)
  }, [selectedName])

  const setFormDefaults =(data)=>{
    setFormData(prevState => ({
      ...prevState,
      ["name"]: data.name,
      ["nationality"]:data.nationality,
      ["age"]:data.age,
      ["single"]: data.single ,
    }));
  }
  const handleChange = event => {
    const { name, value } = event.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value,
    }));
  };

  return (
    <div>
      <ServiceSelect results={results} setFormData={setFormDefaults}/>
      <form onSubmit={handleSubmit}>
      <Checkbox 
        name="single" 
        value ={ formData.single}  
        onValueChange={setIsSelected} 
        onChange={handleChange} 
        >single</Checkbox>
         <br></br>

Answer 1

//

if (data.single){
    <yourcheckbox>.setAttribute('checked' 'true');
};