React -在获取数据时将按钮更改为加载状态

Question

我已经尝试了一些变化，但似乎不能得到它的工作。我有一个自定义钩子，一旦用户点击一个按钮后，从下拉菜单中选择了一个值，就会发布数据。

我想要按钮被禁用，直到获取请求返回状态200。基本上，我希望用户在请求完成之前不要继续到下一页。下面是一些代码:

customHook

const postData = () => {
setLoading(true);
axios({
url: -
headers: -,
method: -,
data: -,
responseType: -
})
.then((response) => {
setLoading(false);
}
})
.catch((error) => {
setLoading(false);
setError(error.response.data));
});
};

按钮组件

<Button
onClick={onClickHandler}
loading={SOME STATE HERE TO ACHIEVE THIS}
>
{Continue}
</Button>

Answer 1

您可以简单地使用布尔状态变量。

const [loading, setLoading] = useState(false)
const onClickHandler = () => {
setLoading(true)
performNetworkCall()
.finally(() => {
setLoading(false)
}
}
return (
<Button onClick={onClickHandler} loading={loading} >
{Continue}
</Button>
)