React.js中如何渲染对象内部的嵌套对象？

核心问题梳理 #

你当前代码里games初始状态设为数组[]，但API返回的是单个游戏对象，且异步请求完成前games为空值，直接访问嵌套属性会触发报错。既然已经能在控制台打印嵌套属性，只需在JSX中安全调用这些属性即可。

具体修改步骤 #

1. 修正初始状态
   把useState的初始值从数组改成空对象，匹配API返回的单个游戏数据结构：

const [games,setGames] = useState({})

2. 在JSX中安全渲染嵌套属性
   使用**可选链操作符?.**规避初始加载时的空值报错，直接在对应位置插入嵌套属性：

<div className='GameInfo-Side-Text'>
  <p className={themeSwitch ? null : 'GameInfoP'}>Graphics: {games.minimum_system_requirements?.graphics}</p>   
  <p className={themeSwitch ? null : 'GameInfoP'}>Memory: {games.minimum_system_requirements?.memory}</p>
  <p className={themeSwitch ? null : 'GameInfoP'}>OS: {games.minimum_system_requirements?.os}</p>
  <p className={themeSwitch ? null : 'GameInfoP'}>Processor: {games.minimum_system_requirements?.processor}</p>
  <p className={themeSwitch ? null : 'GameInfoP'}>Storage: {games.minimum_system_requirements?.storage}</p>
</div>

完整修改后的代码片段 #

const Api = 'https://free-to-play-games-database.p.rapidapi.com/api/game'
// 初始值改为空对象，匹配API返回结构
const [games,setGames] = useState({})

const ApiCall = async() => {
    const data = await axios.get(Api,{
        params: {id: `${id}`},
        headers: {
            "X-RapidAPI-Key": "e45c2e2ba9msh04d74decbb1c499p1737fcjsn4f10ee599568",
            "X-RapidAPI-Host": "free-to-play-games-database.p.rapidapi.com"
          }
    })
    
    console.log(data.data)
    setGames(data.data)
}

useEffect(() => {
  ApiCall()
},[])

return (
    <>
    <div className={themeSwitch ? 'Main-Bg-Container-light' : 'Main-Bg-Container-dark'}>
       <div className='GameInfo'>
        <div className='GameInfo-Top'>
           {/* 顶层属性也添加可选链，避免初始报错 */}
           <h1 className={themeSwitch ? null : 'GameInfoP'}>{games.title}</h1>
           <img id='GameInfoImg' src={games.thumbnail}  alt={games.title || '游戏缩略图'}/>
           <p className={themeSwitch ? null : 'GameInfoP'}>Description: {games.short_description}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Genre: {games.genre}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Platform: {games.platform}</p>
           <div className='Download-Container'>
           <a id={themeSwitch ? 'GameInfoLink-light' : 'GameInfoLink-dark'} href={games.game_url} target='_blank' rel='noopener noreferrer'>Download</a>
           </div>
        </div>
        <div className='GameInfo-Side'>
            <div className='GameInfo-Side-Title'>
           <h3 className={themeSwitch ? null : 'GameInfoP'}>Minimum System Requirements</h3>
            </div>
            <div className='GameInfo-Side-Text'>
           <p className={themeSwitch ? null : 'GameInfoP'}>Graphics: {games.minimum_system_requirements?.graphics}</p>   
           <p className={themeSwitch ? null : 'GameInfoP'}>Memory: {games.minimum_system_requirements?.memory}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>OS: {games.minimum_system_requirements?.os}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Processor: {games.minimum_system_requirements?.processor}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Storage: {games.minimum_system_requirements?.storage}</p>
            </div>
        </div>
       </div>
    </div>
    </>
  )

额外提示 #

• 可选链?.的作用是：当左侧属性不存在时返回undefined而非抛出错误，适配异步请求未完成时的空状态。
• 可以给属性添加默认值，比如games.minimum_system_requirements?.graphics || '暂无数据'，让页面展示更友好。

内容的提问来源于stack exchange，提问作者Dejvi Epa