Блог

Главная - Вопросы по программированию - Можете ли вы заставить useEffect запускаться только один раз при изменении одной из зависимостей, но не при повторном изменении?

Можете ли вы заставить useEffect запускаться только один раз при изменении одной из зависимостей, но не при повторном изменении?

#reactjs #use-effect

#reactjs #use-effect

Вопрос:

Я рендеринг условного содержимого, и у меня есть

 const [content,setContent] = useState(0);
const [data,setData] = useState([]);
let render;
switch(content)
{ 
  case 0:render=<Something/>; break;
  case 1:render=<Else/> ;break;  
}

У меня есть некоторые данные, которые будут использоваться только при рендеринге <Else/> , но пользователь может переключаться между <Something> и <Else/> с помощью переключателя в любое время. Я не хочу загружать данные, если пользователи никогда не переключаются <Else/> , но я также не хочу снова загружать данные в случае, если он переключается с <Else/> на <Something/> , а затем снова на <Else/>

так что использование useEffect(()=>{loadData().then(response=>setData(response.data))},[content]) не очень хорошая идея, поскольку оно будет запускаться каждый раз, когда пользователь переключается, но если я использую useEffect(()=>{loadData().then(response=>setData(response.data))},[]) , а пользователь никогда не переключался, я загружал ненужные данные? Как я могу избежать этой проблемы?

Комментарии:

1. Имейте родительский компонент, который контролирует ваше состояние и может хранить / загружать оба набора данных, когда монтируется представление (что-то или что-то еще), чтобы оно вызывало функцию от родительского элемента для загрузки и сохранения данных. Тогда не имеет значения, размонтируются ли дочерние элементы, поскольку это будет родительский управляющий компонент, который будет хранить данные о каждом из них, что позволит вам избежать повторного запроса данных при замене взад / вперед и загружать только начальные данные представления при запуске.

2. Вы можете инициализировать данные равными null и выполнить нулевую проверку !data amp;amp; loadData()

Ответ №1:

Что вы можете сделать, так это проверить внутри useEffect хука, если нужные вам данные уже были загружены. Если это так, то просто избегайте выполнения запроса.

Или

Передайте ответственность за извлечение данных дочерним компонентам ( Else и Something ). Таким образом, он будет выполняться только при визуализации этого компонента.

Метки: