Состояние react.js пусто, хотя используется useEffect

У меня проблема с проверкой длины моего состояния, хотя я использую axios для получения данных. вот что я сделал до сих пор.

код:

const getAllBanners = async () => {
    res = await axios.get(`/admin_return_banner_positions/`).then((res) => {
      setBanners(res.data.result)
    })
  }

  // HANDLING USEEFFECT
  useEffect(() => {
    getAllBanners()
  }, [])


{getBanners.hits.total.value > 0 ? <>
                    <thead>
                      <tr>
                        <th style = {{ fontSize: "18px" }}>cat</th>
                        <th><span style = {{ fontSize: "18px" }}>up</span><hr /><span> name</span></th>
                        <th style = {{ fontSize: "18px" }}>number</th>
                        <th><span style = {{ fontSize: "18px" }}>down</span><hr /><span>name2</span></th>
                        <th style = {{ fontSize: "18px" }}>number</th>
                      </tr>
                    </thead> <> : null}

ошибка:

TypeError: Cannot read properties of undefined (reading 'total')
style = {{ direction: "rtl", textAlign: "center" }}
  738 | >
> 739 |   {getBanners.hits.total.value > 0 ? <>

reactjs

15.05.2022 11:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я считаю, что состояние getBanners было инициализировано некоторым значением по умолчанию. Это значение может не иметь вложенных свойств до total.

Вам, вероятно, лучше использовать необязательную цепочку в таких сценариях -

const BannerComponent = () => {
  const [getBanners, setBanners] = useState();

  const getAllBanners = async () => {
    await axios.get(`/admin_return_banner_positions/`).then((res) => {
      setBanners(res.data.result)
    });
  }

  useEffect(() => {
    getAllBanners()
  }, []);

  if (getBanners?.hits?.total?.value > 0) { // <---- optional chaining
     return (
       <>
         <thead>
            <tr>
               <th style = {{ fontSize: "18px" }}>cat</th>
               <th><span style = {{ fontSize: "18px" }}>up</span><hr /><span> name</span></th>
               <th style = {{ fontSize: "18px" }}>number</th>
               <th><span style = {{ fontSize: "18px" }}>down</span><hr /><span>name2</span></th>
               <th style = {{ fontSize: "18px" }}>number</th>
           </tr>
        </thead>
      <>
    );
  }
  return null;
}

ПРИМЕЧАНИЕ