时间戳

首页 > 解决方案 > 将 axios 响应保存到状态反应挂钩

javascript - 将 axios 响应保存到状态反应挂钩

问题描述

我正在尝试将我从 Axios 获得的响应保存到使用钩子的状态。但是，每当我尝试使用钩子时，组件都会继续重新渲染无限次。

const [orders, setOrders] = useState([]);

const getUserOrders = async () => {
        await API.getOrders(window.sessionStorage.id)
            .then(res => setOrders(res.data.ordersArr))
            .catch(err => console.log(err));
}
useEffect(() => {
        if (logged_in) {
            getUserOrders();
        } else {
            window.location.href = "/login";
        }
}, [orders])

如果我控制台日志 res.data.ordersArr 而不是使用 setOrders 挂钩，我可以看到预期的数据。当我使用钩子时，它会不断重新渲染。

标签： javascriptreactjsaxiosreact-hooks

解决方案

useEffect每次orders状态更改时，您的钩子都会重新运行，当您的useEffect钩子运行时，您会从 API 获取数据，然后设置orders. 这反过来又会触发具有新值的渲染，orders从而使useEffect调用无效并使其再次触发，最终导致无限循环。

您只是想useEffect通过传递一个空的依赖项列表来强制运行一次useEffect(..., [])

推荐阅读