reactjs - 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 ? <>

回答1

我相信 getBanners 状态已经用一些默认的 value 初始化。 value 可能没有嵌套属性直到 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;
}

笔记

相似文章

随机推荐

最新文章