将 axios 响应保存到状态反应钩子

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

有几件事你需要重构

您的 React Hook useEffect 具有依赖项orders，它将无限次重新渲染

.then 在 await 没有任何意义之后，要么摆脱 async / await 要么包括承诺回调

    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";

            }

    }, [])

Answer 2

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

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