Javascript TypeError:无法读取属性'；标题'；未定义Reactjs的定义

我不知道我为什么会有这个错误！！ 第一次我没有任何错误及其工作，但当我刷新页面时，我有以下错误： 类型错误：无法读取未定义的属性“title”或类型错误：无法读取未定义的属性“image”

import React, { useEffect , useState } from 'react';
import Content from './Content';
import NavBar from './NavBar';

    export default function BlogPost() {

    const [post, setPost] = useState([]);
    const [current, setCurrent] = useState(null)

    useEffect(() => {
       const cleanUp = fetch('http://localhost:3000/posts')
       .then( response => response.json())
       .then( post => 
           setPost(post),
           setCurrent(0)
       )
       return () => cleanUp;
    },[])

    function handleClick(index) {
        setCurrent(index)
    }
     

    return (
        <div className="wrapper d-flex align-items-stretch">
          <NavBar posts={post} handleClick={handleClick} />
          { null != current && <Content post={post[current]} />}
        </div>
    )
}

import React，{useffect，useState}来自“React”；
从“./Content”导入内容；
从“/NavBar”导入导航栏；
导出默认函数BlogPost（）{
const[post，setPost]=useState（[]）；
const[current，setCurrent]=useState（null）
useffect（（）=>{
const cleanUp=fetch（'http://localhost:3000/posts')
.then（response=>response.json（））
。然后（post=>
设置杆（杆），
设定电流（0）
)
return（）=>cleanUp；
},[])
函数handleClick（索引）{
设置当前（索引）
}
返回(
{null！=当前&&}
)
}

Content.jsx：

export default function Content({post}) {
    return (
       <div>
          <div id="content" className="p-4 p-md-5 pt-5">
        <img src={`/assets/${post.image}`} alt={post.title} />
     <h2 className="mb-4">{post.title}</h2>
     <p>{post.body}</p>
  </div>
       </div>
    )
}

导出默认函数内容（{post}）{
返回(
{post.title}
{post.body}

)
}

问题在于：

<h2 className="mb-4">{post.title}</h2>

或者您也可以尝试条件渲染

问题如下：

<h2 className="mb-4">{post.title}</h2>

---

或者您也可以尝试条件渲染，您可以执行以下操作：

export default function Content({post}) {
    return post ? (
       <div>
         <div id="content" className="p-4 p-md-5 pt-5">
           <img src={`/assets/${post.image}`} alt={post.title} />
           <h2 className="mb-4">{post.title}</h2>
           <p>{post.body}</p>
         </div>
       </div>
    ) : null
}

导出默认函数内容（{post}）{
回程站(
{post.title}
{post.body}

)：null
}

您可以执行以下操作：

export default function Content({post}) {
    return post ? (
       <div>
         <div id="content" className="p-4 p-md-5 pt-5">
           <img src={`/assets/${post.image}`} alt={post.title} />
           <h2 className="mb-4">{post.title}</h2>
           <p>{post.body}</p>
         </div>
       </div>
    ) : null
}

导出默认函数内容（{post}）{
回程站(
{post.title}
{post.body}

)：null
}

谢谢您的帮助和解释谢谢您的帮助和解释