reactjs - 如何设置defaultChecked从状态React功能组件复选框获取值(React - Hooks)

Question

我有 api 调用，其 jobdetail 对象的状态值等于 1

  const [jobdetail, setJobdetail] = useState([]);

  React.useEffect(() => {
     const getJobDetail = async () => {
      try {
         const resDataService = await DataService.jobinfo_detail(id)
         setJobdetail(resDataService);
     } catch (error) {
      console.log(error);
      }
   };
  getJobDetail();
}, []);

  React.useEffect(() => {
    reset(jobdetail);
  }, [jobdetail]);

api调用返回的json格式如下:

   {
     "id": 13,
     "client_name": "Pasir Ris - Punggol Town Council",
     "client_id": null,
      "division_name": "Pasir Ris East",
     "block": "12",
     "dateEntry": "14-04-2022",
     "natureofcomplain": "sample complaine",
     "address": "pasir ris east",
     "gtotal": "1080.0",
     "status": 1, // value is one
     "photo_url": "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--70d8263aa1309bd12684731214cc57fb82a654fd/download.jpeg",
"defect_details": [
    {
        "id": 16,
        "uid": 16,
        "defects": "defects sample",
        "recommendation": "recommendation sample"
    }
],
"partsreplaces": [
    {
        "id": 19,
        "uid": 19,
        "jobinfo_id": 13,
        "sorcode": "asd1",
        "item": "pipe",
        "quantity": 12,
        "rates": "90.0",
        "subtotal": "1080.0"
    }
  ]
 }

这是我的复选框标签

   <Checkbox
          colorScheme="green" 
          size="lg"
          {...register("status")}
          onChange={(e) =>
          setValues({ ...values, status: e.target.value })
           }  
          defaultChecked = {jobdetail.status === 1 ? true : false} // this part checkbox is not checked where the jobdetail.status is 1 
     />

当我 console.log(jobdetail.status) 它返回 1 这就是为什么我很困惑为什么 defaultChecked 不起作用。希望可以有人帮帮我。谢谢

Answer 1

defaultChecked 属性在组件安装时使用，并且在组件的生命周期中不应更改。

解决方案

• 保持输入不受控制，等待加载复选框输入，直到加载初始数据。

  const [jobdetail, setJobdetail] = useState([]);
  const [dataLoaded, setDataLoaded] = useState(false);
  
  React.useEffect(() => {
    const getJobDetail = async () => {
      try {
        const resDataService = await DataService.jobinfo_detail(id);
        setJobdetail(resDataService);
      } catch (error) {
        console.log(error);
      } finally {
        setDataLoaded(true);
      }
    };
  
    getJobDetail();
  }, []);
  
  ...
  
  {dataLoaded && (
    <Checkbox
      colorScheme="green" 
      size="lg"
      {...register("status")}
      onChange={(e) =>
        setValues({ ...values, status: e.target.value })
      }  
      defaultChecked={jobdetail.status === 1}
    />
  )}
  

• 将输入转换为受控输入，使用checked属性而不是defaultChecked Prop 。

  <Checkbox
    colorScheme="green" 
    size="lg"
    {...register("status")}
    onChange={(e) =>
      setValues({ ...values, status: e.target.value })
    }  
    checked={jobdetail.status === 1}
  />