从文件中读取ReactJS中的复杂JSON数据会产生未定义错误

Question

我正在从文件中读取数据，我正在调用第三方服务并将数据保存在文件中。下面是一个示例文件，实际文件相当大，我把它剪短了，

{
"tag": "#8GYVRVG",
"name": "Warrior",
"expLevel": 13,
"trophies": 5634,
"bestTrophies": 6007,
"wins": 7756,
"clan": {
"tag": "#9LCLRC90",
"name": "Herakles",
"badgeId": 16000177
},
"arena": {
"id": 54000014,
"name": "Challenger III"
},
"badges": [
{
"name": "1000Wins",
"progress": 7756
},
{
"name": "Played1Year",
"progress": 1464
}
]
}

下面是我的react函数，

import React, {useState, useEffect} from 'react';
export default function PlayerData(){
const [Player,setPlayer] = useState([]);
useEffect(() => {
fetch('../data/player.json')
.then((response) => response.json())
.then((data) => setPlayer(data));
},[setPlayer]);
return(
<div>
<h4>{Player.name}</h4>
<p>{Player.clan.name}</p>
{(player.badges || []).map((item)=>{
<p>{item.name}</p>
})}
</div>
);
}

在运行代码时，它给出如下错误，

TypeError: Cannot read properties of undefined (reading 'name')

当准备Player.clan.name时抛出错误。我认为渲染发生在值被读取之前。我不知道如何读取文件中不属于数组的数据。

Answer 1

我认为这并不能解决所有问题，但这里有三个改变至少可以使它变得更好:

import React, {useState, useEffect} from 'react';
export default function PlayerData(){
const [player,setPlayer] = useState([]);
useEffect(() => {
fetch('../data/player.json')
.then((response) => response.json())
.then((data) => setPlayer(data));
},[player]);
return(
<div>
<h4>{Player.name}</h4>
<p>{Player.clan.name}</p>
{(player.badges || []).map((item)=>{
return <p>{item.name}</p>
})}
</div>
);
}

Answer 2

花了这么多时间，下面是我找到的解决方案。正如我提到的，我收到的JSON文件包含键值和数组。我发现读取键值会抛出错误因为渲染先发生在嵌套值中，我得到了未定义错误。为了解决这个问题，我使用了两种技术，一种是在获取方法中添加SetTimeOut，另一种是在嵌套键值中添加条件。下面是代码

import React, {useState, useEffect} from 'react';
export default function PlayerData(){
const [Player,setPlayer] = useState([]);
useEffect(() => {
fetch('../data/player.json')
.then((response) => response.json())
.then((data) => {
setTimeout(() => {
setPlayer(data);
}, 200);

});
},[]);
return(
<div>
<h4>{Player.name}</h4>
<p>{Player.clan && Player.clan.name}</p>
{(player.badges || []).map((item)=>{
<p>{item.name}</p>
})}
</div>
);
}