React异步调用API取数前返回Null导致表格渲染报错解决方案问询

你遇到的崩溃是因为无数据时API返回的playerStat本身是有效对象，所以原有的if (playerStat)判断始终为真，但此时对象内不存在stats数组、或stats[0].splits数组为空，直接访问索引0的属性就会抛出未定义错误。

修改后的完整SKATERTABLESTATS.JS代码 #

import React, {useState, useEffect} from 'react'

function SkaterTableStats(props) {
    const [playerStat, setPlayerStat] = useState(null);
    // 补充依赖项：id和season变化时重新请求数据
    useEffect(() => {
        getInfoData();

        async function getInfoData() {
            try {
                const response = await fetch(`https://statsapi.web.nhl.com/api/v1/people/${props.id}/stats?stats=statsSingleSeason&season=${props.season}`)
                const statx = await response.json();
                setPlayerStat(statx);
            } catch (e) {
                // 请求失败时直接置空，不渲染
                setPlayerStat(null);
            }
        }
    }, [props.id, props.season]);

    // 用可选链逐层校验所有必要属性是否存在
    if (playerStat?.stats?.[0]?.splits?.[0]) { 
        const statData = playerStat.stats[0].splits[0];
        return (
            <tr>
                <td>{statData.season}</td>
                <td>{statData.stat.games}</td> 
            </tr>    
        )
    } else {
        return null
    }
}

export default SkaterTableStats

调整说明 #

• 给useEffect补充了props.id和props.season作为依赖项，避免参数更新后组件不重新请求数据
• 给异步请求添加了try/catch捕获异常，避免接口请求失败导致页面崩溃
• 用可选链操作符?.逐层校验属性是否存在，只要任意一层属性不存在/数组为空，判断就会返回false，直接返回null不渲染，不会抛出未定义错误
• 不需要额外添加容器元素，判断不通过时返回null不会破坏表格结构

如果你的项目环境不支持ES2020的可选链语法，可以替换为逐层判断：

if (
  playerStat && 
  playerStat.stats && 
  playerStat.stats.length > 0 && 
  playerStat.stats[0].splits && 
  playerStat.stats[0].splits.length > 0
) {
  // 渲染逻辑不变
}

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