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

Question

[Nik_1011]

Добрый день.

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


При вводе в 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.

Как предотвратить лишний ререндер и при этом же выполнять функцию при изменении зависимостей?

Comments

[szQocks]

Ты определись что ты хочешь, что бы функция вызывалась 1 раз или вызывалась при каждом изменении lat, long.

Answer 1

[Алексей Мельников]

Здравствуйте!

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

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]);