@Nik_1011

Как предотвратить перезагрузку страницы(ререндер) в React?

Добрый день.

Подскажите,пожалуйста,сделал приложение.
63d75b14b63f0045107842.png

При вводе в input и последующем нажатии Enter меняются параметры lat,long в данной функции, которая находится в App.js, следовательно вся страница перезагружается как при нажатии f5.

React.useEffect(() => {
    const fetchData = async () => {
      if (lat && long) {
        try {
          setLoading(true);
          const response = await axios(urlCoords);
          const data = await response.data;
          setData(data);
          setLoading(false);
        } catch (error) {
          alert('Failed to load resource');
          console.error(error);
          setError(error);
          setLoading(false);
        }
        setLocation('');
      }
    };
    fetchData();
  }, [lat, long]);


Думал исправить это при помощи useCallback, но тогда функция реагирует на изменение зависимостей(lat,long) только при первой загрузке один раз. Перенести в дочерний компонент-думал об этом, но хотелось бы, чтобы функция осталась в App.js.

Как предотвратить лишний ререндер и при этом же выполнять функцию при изменении зависимостей?
  • Вопрос задан
  • 321 просмотр
Пригласить эксперта
Ответы на вопрос 1
@almel
React-native engineer
Здравствуйте!

Если Вы положите правильные зависимости, то данные будут подтягиваться при их изменении

const getWeather = React.useCallback(async () => {
    try {
      setLoading(true);
      const response = await axios(urlCoords);
      const data = await response.data;
      setData(data);
      setLoading(false);
    } catch (error) {
      alert('Failed to load resource');
      console.error(error);
      setError(error);
      setLoading(false);
    }
    setLocation('');
  }, []);

  React.useEffect(() => {
    if (lat && long) {
      getWeather();
    }
  }, [lat, long, getWeather]);
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы