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

Question

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

  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]);

json 格式 return 从 api 调用将是这样的：

   {
     "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) 它 return 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 道具

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

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

How to set defaultChecked getting value from state React Functional Component Checkbox (React - Hooks)

reactjs

react-hooks

解决方案