Как вызвать useEffect в React только один раз ПОСЛЕ загрузки определенной переменной

avatar
user6792790
1 июля 2021 в 17:24
902
1
3

Я пытаюсь использовать хук useEffect в React для запуска некоторых функций только один раз. Я знаю, что обычно это можно сделать, выполнив 

useEffect(() => {
    // some functions
    }
}, [])

Однако функции требуют загрузки некоторых значений. Итак, я хочу, чтобы этот useEffect срабатывал только ОДИН РАЗ, когда значение не пусто. 

useEffect(() => {
    // some functions
}, [theValue])

Это то, что я пробовал, но я знаю, что это будет срабатывать при каждом изменении theValue.

Как я могу изменить свой useEffect, чтобы он запускался только ОДИН РАЗ, когда theValue не становится пустым?

Источник
Andy
1 июля 2021 в 17:29
1

Под «загруженным» вы имеете в виду асинхронный запрос?

Noriller
1 июля 2021 в 17:42
0

без какой-либо другой информации... то, что вы могли бы сделать, это третье состояние, которое будет "фильтровать" все после первого вызова... что-то внутри useEffect, например if (firstTime) do stuff else dont

Ответы (1)

avatar
Drew Reese
1 июля 2021 в 19:08
5

Вы можете использовать ссылку React для хранения логического значения, если эффект уже был запущен, и объединить его с условным тестом, подтверждающим, что все зависимости выполнены, чтобы активировать эффект.

const effectTriggeredRef = React.useRef(false);

React.useEffect(() => {
  if (!effectTriggeredRef.current && /* deps conditions */) {
    effectTriggeredRef.current = true;
    // trigger some functions
  }
}, [...deps]);