时间戳

首页 > 解决方案 > 在渲染组件之前获取项目

reactjs - 在渲染组件之前获取项目

问题描述

我在下面有这样的代码，我的问题是如何在渲染组件之前获取产品？我的意思是在我的 Panel 组件中，我有一个 .map 函数，它显示错误“无法读取未定义的属性 'map'”，因为获取产品的速度不够快。

const Announcments = () => {
  const [announcements, setAnnouncement] = useState([]);

  useEffect(() => {
    const getProducts = async () => {
      const res = await fetch("http://localhost:8000/api/products", {
        method: "GET",
      });
      const data = await res.json();
      await setAnnouncement(data);
    };
    getProducts();
  }, []);

  return (
    <div className="announcments">
      <TopNav results={announcements.length} />
      <Panel announcements={announcements} />
      <div className="down-pages-list">
        <PagesList />
      </div>
    </div>
  );
};

.map 函数：

{announcements.results.map((announcement) => (
          <SingleAnnoun
            price={announcement.price}
            title={announcement.name}
            photo={getPhoto(announcement.images[0].file_name)}
          />
        ))}

标签： reactjscomponentsfetch

解决方案

问题

这里的问题不是“产品获取速度不够快”，而是您的初始状态与您在初始渲染时尝试渲染的状态不匹配。即announcements最初是一个空数组（[]），但您正在尝试映射announcements.results显然未定义的映射。

解决方案

使用有效的初始状态，以便最初呈现某些内容。

const [announcements, setAnnouncement] = useState({ results: [] });

现在announcements.results已定义且可映射。

当然，这也假设您的setAnnouncement(data);状态更新也是正确的。即您的 JSON是一个具有数组属性data的对象。results

顺便说一句，setAnnouncement是一个同步函数，所以没有什么可做await的。

推荐阅读