将 axios 响应保存到 state 反应钩子

Question

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

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

Answer 1

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

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

Answer 2

您需要重构几件事

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";
            }
    }, [])