如何在CheckBox字段React js上调用onChange函数

Question

我想在更改复选框输入时调用 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> )

Answer 1

只需删除第二个 useEffect 并将您的 API 调用放入 onChange 函数中，如下所示：

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

const App = () => {
  const [data, setConfigData] = React.useState(false);
  const [check, setCheck] = React.useState(false);
  const [loading, setLoading] = React.useState(true);

  function fetchConfigApi() {
    try {
      // simulate api call
      setTimeout(()=> {
        setConfigData("new data on: "+ new Date() )
        setCheck(prev=>!prev);
        setLoading(false);
      },500)
    } catch (e) {
      console.log("error response", e.response);
    }
  }

  function postSelfService() {
    try {
      // simulate api call
      setTimeout(()=> fetchConfigApi(),500)
    } catch (e) {
      console.log("error response", e.response);
    }
  }

  const onSelfServiceChange = (e) => {
    setLoading(true);
    postSelfService();
  };

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

  return (
    <div>
        <label>
          <input
            type="checkbox"
            checked={check}
            onChange={onSelfServiceChange}
            name="check"
            disabled={loading}
          />
          Enable Self Service 
        </label>
        <hr/>
        <p>{loading ? "loading..." : data}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>