在渲染组件之前获取项目

Question

我有下面这样的代码，我的问题是如何在呈现组件之前获取产品？我的意思是在我的 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>
  );
};

.地图函数：

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

Answer 1

问题

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

解决方案

使用有效的初始状态，以便初始渲染。

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

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

当然，这还假定您的 setAnnouncement(data); 状态更新也是正确的。也就是说，您的 JSON data 是一个带有 results 属性的对象，它是一个数组。

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

在渲染组件之前获取项目

Fetch items before render component

components

fetch

reactjs

问题

解决方案