Question

我正在尝试将我从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挂钩，则可以看到期望的数据。当我使用挂钩时，它会不断重新渲染。

Answer 1

每次useEffect状态更改时，您的orders挂钩将重新运行，当您的useEffect挂钩运行时，您将从API提取数据，然后设置orders。然后，这会为orders触发一个具有新值的渲染，从而使useEffect调用无效并使它再次触发，最终导致无限循环。

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

Answer 2

您需要重构几件事

您的React Hook useEffect具有依赖项orders，它将重新呈现无限次数
.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";
            }
    }, [])

保存axios对状态反应挂钩的响应

2 个答案: