小编Dav*_*tta的帖子

我在我正在构建的博客网站上遇到了 useEffect 挂钩问题。我尝试从后端获取所有博客，以便我可以使用它们用最新的五个博客填充此部分。当我使用下面的代码时，useEffect 中的空数组可以防止无限量的 fetch 调用，这很棒。

但后来我遇到了一个问题，如果我刷新页面或导航回该页面，我会在第 35 行收到一条错误消息，提示“找不到未定义的 mainImage”。

我的问题是如何让 fetchCall 填充状态，甚至在刷新时也这样做，以便我仍然可以访问我需要的信息。谢谢！

import React, {useState, useEffect} from 'react';
import CardItem from './CardItem';
import './Cards.css';

function Cards() {
  const [blogs, setBlogs] = useState();

  useEffect(() => {
      fetchBlogs();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[]);

  const fetchBlogs = async () => {
    console.log('ok');
    const response = await fetch('http://localhost:3000/blogs');
    const data = await response.json();
    setBlogs(data);
  };


  return (
    <div className='cards'>
      <div className='header-container'>
        <img
          className='logo'
          alt='logo'
          src='https://Zi.imgur.com/MaLqLee.png'
        />
        <h1 className='cards-title'>Hot takes and hometown bias</h1>
      </div>
      <div …