react问题处理--表单多次点击重复提交

对于一个不起眼的小问题，初入前端江湖的我以前代码写的是不够仔细的，那么，我就分享一下我的不仔细： 问题：对于提交表单多次疯狂点击的时候疯狂调用接口，那么我们只需要设置一个变量loading，在调用接口之前让loading为true,接口调用结束设置loading为false就可以啦

const [loading, setLoading] = useState(false)

//提交
const onFinish = async () => {
   const req = {
        ...此处参数代码省略
   }
   setLoading(true)
   const rst = await addData(req)
   setLoading(false)
}

注意哦,在我们的表单外层要加 Spin

<Spin spinning={loading}>
    <Form></Form>
</Spin>

就是这样，其实除了加loading我们还可以使用防抖节流去控制，或者单独写一个加载组件，加载组件里面设置一个变量控制。