Сохранить ответ 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

Есть несколько вещей, которые вам нужно реорганизовать

1. ваш useact-эффект React Hook имеет зависимость orders, которая будет рендериться неограниченное количество раз
2. .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(..., [])