刷新浏览器（选项卡）时，React 组件中的状态未设置数据

Question

我有一个简单的反应组件，它从 API 获取数据（在 UseEffect 中调用的获取），并使用 HTML 显示它。当我刷新页面时，所有 html 都会从页面中消失并且变为空白。奇怪的是，当我改为在代码编辑器中进行一些更改并在保存后让 react 自动更新页面时，它显示的一切都很好。

这是组件的代码 sn-p：

export function AgentCard(props){
    console.log("agentcard function");
    const [agentData,setAgentData] = useState({});

    useEffect(()=> {
        console.log('running useEffect')
        axios.get('https://valorant-api.com/v1/agents/').then(res=>{
            var agentRes;

            for (const agent of res.data['data']){
                if (agent['displayName'] === props.agentName){ agentRes = agent}
            }

            setAgentData(agentRes);

            console.log(agentData)
        })
    },[])

    return(
        <div className='AgentCard'>
            <h2>{agentData['displayName']}</h2> 
            <img src={agentData['displayIcon']}></img>
            <div className='AgentCardBody'>
                <div className='AbilitiesBar'>
                   <img src={agentData['abilities'][0]['displayIcon']} className='AbilitiesIcon'></img>
                    <img src={agentData['abilities'][1]['displayIcon']} className='AbilitiesIcon'></img>
                    <img src={agentData['abilities'][2]['displayIcon']} className='AbilitiesIcon'></img>
                    <img src={agentData['abilities'][3]['displayIcon']} className='AbilitiesIcon'></img>
                </div>
            </div>
        </div>
    )

经过一番挖掘和记录，我发现当我刷新页面时，状态（agentData）被保存到这个：

https://imgur.com/a/QzfIdpm

并在控制台中得到以下错误：

https://imgur.com/a/H7gLiTQ

但一旦我对编辑器进行任何更改并让反应自动刷新，日志显示状态 agentData 具有从 API 中提取的正确数据对象。

另外，只有当我运行以下部分代码时才会发生这种情况

<img src={agentData['abilities'][0]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][1]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][2]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][3]['displayIcon']} className='AbilitiesIcon'></img>

一旦我将其注释掉，即使在浏览器刷新后一切都会正确显示

我知道我提出问题的方式令人困惑，但我是前端开发的新手，并不真正知道我应该在这里寻找什么。

Answer 1

可能是因为agentData.abilities 返回 undefined（请记住，您有一个异步填充的空对象），但您尝试在模板中访问它，就好像存在数组一样。

如果在 agentData.abilities 未定义时有条件地渲染那些 <img> 元素，您可以轻松解决这个问题，即：

return(
    <div className='AgentCard'>
        <h2>{agentData['displayName']}</h2> 
        <img src={agentData['displayIcon']}></img>
        <div className='AgentCardBody'>
            {agentData.abilities && (
                <div className='AbilitiesBar'>
                    <img src={agentData.abilities[0].displayIcon} className='AbilitiesIcon' />
                    <img src={agentData.abilities[1].displayIcon} className='AbilitiesIcon' />
                    <img src={agentData.abilities[2].displayIcon} className='AbilitiesIcon' />
                    <img src={agentData.abilities[3].displayIcon} className='AbilitiesIcon' />
                </div>
            )}
        </div>
    </div>
)

更好的是：您可以简单地遍历 agentData.abilities 中的前 4 个条目，以使您的 DOM 更简单：

return(
    <div className='AgentCard'>
        <h2>{agentData['displayName']}</h2> 
        <img src={agentData['displayIcon']}></img>
        <div className='AgentCardBody'>
            <div className='AbilitiesBar'>
                {agentData.abilities && agentData.abilities.slice(0,4).forEach(ability => (
                    <img src={ability.displayIcon} className='AbilitiesIcon' />
                )}
            </div>
        </div>
    </div>
)