渲染组件时，React useEffect 不会触发获取

我正在尝试从 JSON 获取数据并将该数据映射到组件，当我注释掉组件时，获取成功检索了我的数据（通过控制台日志）。但是当我打开组件时，应用程序失败并显示错误“无法读取未定义的属性‘根’”。

我猜这是因为组件在 fetch 触发之前渲染导致它出错，但我不知道如何修复它。

对我的知识缺乏提前道歉，我刚刚开始学习React，非常绿色。

import "./app.css";
import Legal from "../legal/Legal";
import BlogEntry from "./BlogEntry";

const Blog = ({ setSelectedLink }) => {
  const [items, setItems] = useState({});
  const fetchItems = async () => {
    const data = await fetch("https://api.jsonbin.io/v3/b/60bc11a492164b68bec13b15", {
      method: "GET",
      headers: {
        "X-Master-Key": "<API KEY HIDDEN FOR STACKOVERFLOW>",
      },
    });

    const items = await data.json();
    console.log(items);
    setItems(items);
  };
  useEffect(() => {
    fetchItems();
    window.scroll(0, 0);
    setSelectedLink(1);
  }, []);
  return (
    <>
      <div className="blog-page">
        <div className="blog-container">
          {items.record.root.map((entry) => {
            return (
              <BlogEntry
                key={entry.id}
                id={entry.id}
                title={entry.title}
                date={entry.date}
                body={entry.body}
              />
            );
          })}
        </div>
      </div>
      <Legal />
    </>
  );
};

export default Blog;