嗨，我正在尝试映射一个 api 数组以显示数组中每个索引的段落。但是我一直收到错误：

**> TypeError：未定义不是对象（正在评估

'post.game_indices.version.name')**

但是当我控制台日志发布并使用下面的按钮时，它显示我想要的内容而不是未定义。那么为什么当我想映射段落时它是未定义的？

'''

从'react'导入 React，{useEffect，useState} 从'./axios'导入实例

const Home =（）=> {

const [post, setPost] = useState(null);
const [error,setError] = useState(null);
const [showTypes,setShowTypes]=useState(false);
const [showAbilities,setShowAbilities]=useState(false);

useEffect(() => {
    instance.get("bulbasaur/").then((response) => {
        setPost(response.data);
        }).catch(error => {
            setError(error);
        })
},[]);
console.log(post);
if (error) return `Error: ${error.message}`;
if (!post) return 'no post!'



return (
<>
<h1>{post.name}</h1>
<button onClick={()=>setShowTypes(!showTypes)}>types</button>
{showTypes? <p>{(post.types[0].type.name)}</p>:null}
{showTypes? <p>{(post.types[1].type.name)}</p>:null}
<button onClick={()=>setShowAbilities(!showAbilities)}>abilities</button>
{showAbilities? <p>{(post.abilities[0].ability.name)}</p>:null}
{showAbilities? <p>{(post.abilities[1].ability.name)}</p>:null}
{/* <button onClick={gameVersion}>game versions</button> */}
{post.game_indices.version.name.map(name => <p key={post.game_indices.version.name}>{name}</p>)}
</>
)

导出默认主页；

'''