Почему результаты данных показывались дважды при попытке загрузить данные из localStorage и API без использования useEffect?

#reactjs #use-effect

#reactjs #использование-эффект

Вопрос:

Вот часть моего проекта, где я пытался загрузить данные из моего localStorage и загрузить данные из jsonplaceholder (это ради моего запроса, это не часть моего основного проекта):

 //load data from local storage and API without using useEffect
  const savedCart = getDatabaseCart();
    console.log(savedCart);
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => console.log(data));

//load data from local storage and API using useEffect
  useEffect(() => {
    const savedCart = getDatabaseCart();
    console.log(savedCart);
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => console.log(data));
  }, []);
  

и результаты здесь: первый результат появляется, когда я не применяю useEffect, второй результат появляется, когда я применяю useEffect —->
это результат без использования useEffect

это вызывает при применении useEffect

почему это происходит???

Ответ №1:

Скорее всего, это вызвано повторным отправлением (состояние обновлено где-то еще). Перехват useEffect с пустым вторым параметром приводит к тому, что обработчик запускается только один раз. Вот дополнительная информация: css-tricks.com/run-useeffect-only-once