javascript - 将 axios 响应保存到状态 react Hook

Question

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

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 Hook ，我能够看到预期的数据。当我使用钩子(Hook)时，它会不断重新渲染。

Answer 1

有几件事需要重构

1. 您的 React Hook useEffect 具有依赖项 orders，它将无限次地重新渲染
2. .then 在 await 之后没有任何意义，要么摆脱 async/await 要么包括 promise 回调

    const getUserOrders = () => {
            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";
            }
    }, [])