Как предотвратить мигание компонента функции React во время асинхронного запроса

#javascript #reactjs

Вопрос:

Прежде чем приведенный ниже компонент функции React вернет какой-либо JSX, он проверяет AWS Cognito для текущего пользователя. Данные пользователя извлекаются асинхронно, поэтому разметка для no user быстро мигает, прежде чем компонент повторно отобразит JSX для вошедшего в систему пользователя.

Каков правильный способ избежать такого типа мигания? Есть ли лучший способ асинхронной выборки данных перед рендерингом компонентов функции?

 import React, { useState, useEffect } from 'react';
import { Auth } from "aws-amplify";
import { Redirect } from 'react-router-dom';

function Component() {

    const [user, setUser] = useState(true);

    async function checkUser() {
        try {
            const data = await Auth.currentUserPoolUser();
            const userInfo = { username: data.username, ...data.attributes, }
            setUser(userInfo);
        } catch (err) { console.log('error: ', err) }
    }

    useEffect(() => {
        checkUser();
    }, []);


    if(user) {
        return <p>Logged in user content</p>
    } else {
        return <Redirect to="/login" />
    }
}

export default Component;

1. Я предполагаю, что опубликованный вами код является неполным или не содержит некоторых важных данных, потому что atm часть «Когда пользователь входит в систему …» никогда не отображается. (пользователь всегда правдив)

2. Если для пользователя установлено значение useState(null) , то оно не работает. Но при инициализации as true JSX во втором возврате быстро мигает. Вот почему я в замешательстве.

3. Он определенно должен быть установлен null при монтировании компонента. Все еще неясно, почему содержимое мигает.

4. Причина, по которой для него установлено значение null, заключается в том, что если второй оператор return возвращает перенаправление на форму входа, то он всегда будет перенаправляться. Отредактировал вопрос.

Ответ №1:

вы можете добавить состояние для загрузчика и показать загрузку при выполнении запроса.

 function Component() {

    const [user, setUser] = useState(null);
    const [isLoading, setLoading] = useState(true)


    async function checkUser() {
        setLoading(true) 
        try {
            const data = await Auth.currentUserPoolUser();
            const userInfo = { username: data.username, ...data.attributes, }
            setUser(userInfo);
            setLoading(false)
        } catch (err) { console.log('error: ', err); setLoading(false) }
    }

    useEffect(() => {
        checkUser();
    }, []);

    if(isLoading) return <p>Loading... </p>

    if(user) {
        return <p>Logged in user content</p>
    } else {
        return <p>When the user is logged in, this content flashes quickly.</p>
    }
}

1. Я считаю, что это всего лишь обходной путь к проблеме.

2. Я думаю, что этот шаблон используется для приложений на стороне клиента. Из вашего кода выше вы пытаетесь получить текущего пользователя, поэтому тем временем вы должны показать индикатор, который загружается. вы ожидаете, что ничего не будет отображаться во время выполнения?

3. Добавление загрузчика — хороший совет, но мы все еще не знаем, почему содержимое мигает.

4. const [user, setUser] = useState(true); на самом деле не должно быть false