Блог

Главная - Вопросы по программированию - useEffect всегда имеет пустой массив при обновлении

useEffect всегда имеет пустой массив при обновлении

#reactjs #next.js

Вопрос:

Если я перемещаюсь по веб-сайту с помощью навигации, это работает нормально, но если я обновлю браузер, то то, что я получаю от useEffect, всегда будет пустым массивом, но я не знаю почему.

   const [footerSidebars, setFooterSidebars] = useState([]);

  useEffect(() => {
    const ourRequest = axios.CancelToken.source();
    const getFooter = async () => {
      async function getSidebarOne() {
        try {
          const { data } = await axios.get(
            `http://localhost:8888/example/wp-json/api-sidebars/v1/sidebar1`
          );
          return data;
        } catch (err) {
          console.log(err);
        }
      }

      async function getSidebarTwo() {
        try {
          const { data } = await axios.get(
            `http://localhost:8888/example/wp-json/api-sidebars/v1/sidebar3`
          );
          return data;
        } catch (err) {
          console.log(err);
        }
      }

      const sidebars = await axios.all([getSidebarOne(), getSidebarTwo()]);

      setFooterSidebars(sidebars);

      console.log(footerSidebars);
    };
    getFooter();
    return () => {
      ourRequest.cancel();
    };
  }, []);

Я получаю неопределенную ошибку при попытке вывода данных

     {footerSidebars amp;amp; (
      <div
        dangerouslySetInnerHTML={{
          __html: DOMPurify.sanitize(footerSidebars[0].body_response),
        }}
      />
    )}

Обновить:

Я добавил проверку длины, и теперь это, кажется, работает. Однако является ли это правильным подходом?

     {footerSidebars.length amp;amp; (
      <div
        dangerouslySetInnerHTML={{
          __html: DOMPurify.sanitize(footerSidebars[0].body_response),
        }}
      />
    )}

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

1. Возможно, вы не делаете это неправильно , просто при входе footerSidebars в систему переменная будет установлена в следующем цикле рендеринга, потому что вы просто установили ее прямо над ней. если вы поместите свой console.log вне эффекта использования, вы увидите, что он имеет значение при повторной визуализации компонента.

2. А, понятно. Он дважды регистрируется в консоли. Сначала это пустой массив, а затем в нем есть данные. Это решает эту проблему. Теперь, когда я на самом деле пытаюсь вывести данные, которые я получаю «не могу прочитать свойство body_response неопределенного», я обновлю свой вопрос с помощью кода

3. footerSidebars.length amp;amp; ... или footerSidebars[0] amp;amp; ...

4. Да, я только что заметил подход Джованни после того, как прокомментировал. Хорошо выглядишь!

5. Спасибо всем за вашу помощь!

Метки: