Как остановить "много повторных рендеров" при проверке, извлекается ли информация из базы данных? - PullRequest
Новая
       5

Как остановить "много повторных рендеров" при проверке, извлекается ли информация из базы данных?

0 голосов
/ 06 мая 2020

Привет, я пытаюсь вызвать задержку между извлечением данных из базы данных и вычислением BMI, но проверка оператора if вызывает проблему "слишком много повторных рендеров". как мне обойти это? 

function Main_page(props) {

    const [loading, setLoading] = useState(true)
    const [healthData, healthDataSet] = useState(null)
    const [BMI, BMIset] = useState(null)
    const [BMR, BMRset] = useState(null) 


    useEffect(() => {

        const user = Authentication.auth().currentUser;
        {
            user !== null &&
                Authentication.firestore().collection('Health_data')
                    .doc(user.uid)
                    .get()
                    .then(doc => {
                        healthDataSet(doc.data())
                        setLoading(false)
                    }).catch(function (error) {
                        console.error("Error reading health", error);
                    });
        }
        return () => {
            document.body.style.overflow = 'unset';
        }

    }, []);

    if (!loading) {
        BMIset(healthData.weight/(healthData.height^2))
    }

Вот фрагмент моего кода, расчет должен производиться только после того, как для загрузки установлено значение false. в чем тут исправление? заранее спасибо.

1 Ответ

3 голосов
/ 06 мая 2020

useEffect + его второй параметр должен помочь . 

useEffect(() => {
    if(!loading && healthData !== null) 
        BMIset(healthData.weight/(healthData.height^2))
}, [loading, healthData]);

Таким образом:

  • loading состояние по умолчанию true
  • healthData состояние по умолчанию null

Вы запрашиваете firestore, и когда он возвращает успешный ответ, вы устанавливаете:

  • healthData в документ, возвращенный firestore

Новый useEffect пропустит эффект , если loading и healthData не изменяются. Затем вы вычисляете установленный ИМТ, когда loading равно false, а healthData не пусто.

...