Question

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

我猜这是因为组件在 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;

Answer 1

为 items.record.root 设置默认值

const [items, setItems] = useState({ record: { root: [] } });

将 false 传递到你的效果钩子的依赖数组中，让它运行一次（并且只运行一次）

  useEffect(() => {
    fetchItems();
    window.scroll(0, 0);
    setSelectedLink(1);
  }, [false]);

Answer 2

您可以尝试使用可选链吗？。这部分逻辑中的功能 - items.record.root.map

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

2 个答案: