Javascript 如何在复选框字段上调用onChange函数

我想在更改复选框输入时调用post API？ 现在我在下面的模式中执行此操作，但是当组件重新呈现此API函数时，调用了它吗？请问怎么办

 const [check, setCheck] = useState();
 
  async function fetchConfigApi() {
    try {
       const result = await axios.get(`/configuration/${system_id}`);
       const { status, data } = result;
       setConfigData(data);
       setCheck(data.self_service);
    } catch (e) {
      console.log("error response", e.response);
    }  
  }

  async function postSelfService() {
   try {
      const fd = new FormData();
      fd.append("self_service", check);
      const result = await axios.put(`/configuration/${system_id}`, fd);
      fetchConfigApi();
    } catch (e) {
      console.log("error response", e.response);
    }   
  }  

  const onSelfServiceChange = (e) => { setCheck(!check); };

  useEffect(() => { fetchConfigApi(); }, []);

  useEffect(() => { postSelfService(); }, [check]);

return (
    <div className={classes.subContainer}>
        <div>
          <FormControlLabel
            control={
               <Checkbox
                checked={check}
               onChange={onSelfServiceChange}
                 name="check"
               />
             }
             label="Enable Self Service"
           />    </div> )

const[check，setCheck]=useState（）；
异步函数fetchConfigApi（）{
试一试{
const result=await axios.get（`/configuration/${system_id}`）；
const{status，data}=结果；
setConfigData（数据）；
setCheck（数据自助服务）；
}捕获（e）{
日志（“错误响应”，即响应）；
}  
}
异步函数postSelfService（）{
试一试{
const fd=new FormData（）；
fd.追加（“自助服务”，检查）；
const result=wait axios.put（`/configuration/${system_id}`，fd）；
fetchConfigApi（）；
}捕获（e）{
日志（“错误响应”，即响应）；
}   
}  
const onSelfServiceChange=（e）=>{setCheck（！check）；}；
useffect（（）=>{fetchConfigApi（）；}，[]）；
useEffect（（）=>{postSelfService（）；}，[check]）；
返回(
)

只需删除第二个

useffect

并将API调用放入

onChange

函数中，如下所示：

为了获得更好的用户体验并避免不必要的调用，您应该在用户单击复选框时添加加载状态，该复选框在获取结果时被禁用，然后根据响应选中或取消选中

const-App=（）=>{
const[data，setConfigData]=React.useState（false）；
const[check，setCheck]=React.useState（false）；
常量[loading，setLoading]=React.useState（true）；
函数fetchConfigApi（）{
试一试{
//模拟api调用
设置超时（（）=>{
setConfigData（“新数据日期：“+new Date（）”）
setCheck（prev=>！prev）；
设置加载（假）；
},500)
}捕获（e）{
日志（“错误响应”，即响应）；
}
}
功能自助服务（）{
试一试{
//模拟api调用
setTimeout（（）=>fetchConfigApi（），500）
}捕获（e）{
日志（“错误响应”，即响应）；
}
}
const onSelfServiceChange=（e）=>{
设置加载（真）；
自助服务（）；
};
React.useffect（（）=>{
fetchConfigApi（）；
}, []);
返回(
启用自助服务

{正在加载？“正在加载…”：数据}

);
}
render（，document.getElementById（“react”）

最初我尝试过，但问题是当我从api获取此检查数据并将其放在复选框中时，它总是显示cheked。但是当我检查并添加另一个save按钮来点击postapi时，它的工作状态很好。如果你知道这个问题，请告诉我。ThanxOh true，我看到我们调用
setCheck
两次。我确实在用户单击复选框时添加了一个加载状态，在获取结果时禁用，然后根据响应选中或取消选中复选框，从而使我的答案变得更好。bro我非常感谢您的帮助。但即使它不起作用，我也会给你举个例子。