Javascript 在React/JSX中显示嵌套的JSON

我有一些JSON格式如下：

{
    card_id: "afe1500653ec682b3ce7e0b9f39bed89",
    name: "A.J. Burnett",
    playerattribute: {
        team: "Marlins",
        rarity: "Diamond",
    }
}

我试图在组件中显示名称和团队。这是我的

const PlayerProfile = ({ match, location }) => { 
    const { params: { cardId } } = match;
    const [player, setPlayer] = useState(0);
 
    useEffect(() => {
        const fetchData = async () => {
          const result = await axios(
            `http://127.0.0.1:8000/api/player-profiles/${cardId}/?format=json`,
          ).then((result) => {
            setPlayer(result.data);
          });
        };
        fetchData();
      }, []);

    return (
        <Container component="main">
            Name: {player.name}
            Team: {player.playerattribute.team}
        </Container>
    )
}

export default PlayerProfile;

constplayerprofile=（{match，location}）=>{
常量{params:{cardId}}=match；
const[player，setPlayer]=useState（0）；
useffect（（）=>{
const fetchData=async（）=>{
常量结果=等待axios(
`http://127.0.0.1:8000/api/player-profiles/${cardd}/？format=json`，
)。然后（（结果）=>{
setPlayer（result.data）；
});
};
fetchData（）；
}, []);
返回(
名称：{player.Name}
团队：{player.playerattribute.Team}
)
}
导出默认PlayerProfile；

但是，我得到了以下错误：

TypeError:无法读取未定义的属性“team”

---

这个名字很好用。所以我假设这是嵌套JSON的问题。

如果投影值是一个对象，则可能不应该将播放器状态实例化为0

出现此错误是因为您试图访问创建时不存在的对象属性的属性

基本上，您的代码尝试这样做：

{0.playerattribute.team}

0.playerattribute => undefined

解决方法是使用条件呈现或符合JSX需要的默认状态初始值

const PlayerProfile = ({ match, location }) => { 
const { params: { cardId } } = match;
const [player, setPlayer] = useState({
    name: "",
    playerattribute: {
        team: ""
    }
});

useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://127.0.0.1:8000/api/player-profiles/${cardId}/?format=json`,
      ).then((result) => {
        setPlayer(result.data);
      });
    };
    fetchData();
  }, []);

return (
    <Container component="main">
        Name: {player.name}
        Team: {player.playerattribute.team}
    </Container>
)
}

export default PlayerProfile;

constplayerprofile=（{match，location}）=>{
常量{params:{cardId}}=match；
const[player，setPlayer]=useState({
姓名：“，
玩家属性：{
小组：“”
}
});
useffect（（）=>{
const fetchData=async（）=>{
常量结果=等待axios(
`http://127.0.0.1:8000/api/player-profiles/${cardd}/？format=json`，
)。然后（（结果）=>{
setPlayer（result.data）；
});
};
fetchData（）；
}, []);
返回(
名称：{player.Name}
团队：{player.playerattribute.Team}
)
}
导出默认PlayerProfile；

或

constplayerprofile=（{match，location}）=>{
常量{params:{cardId}}=match；
const[player，setPlayer]=useState（null）；
useffect（（）=>{
const fetchData=async（）=>{
常量结果=等待axios(
`http://127.0.0.1:8000/api/player-profiles/${cardd}/？format=json`，
)。然后（（结果）=>{
setPlayer（result.data）；
});
};
fetchData（）；
}, []);
返回(
名称：{player？.Name}
球队：{球员？.playerattribute？.Team}
)
}
导出默认PlayerProfile；

设置useState

const[player，setPlayer]=useState（“”）

如果仍然出现相同的错误，请提供console.log（result）

的屏幕截图，因为在首次渲染时，当数据未到达时，播放器的值为0。添加条件，如if player.name，然后显示name和teamHere是问题：

const[player，setPlayer]=useState（0）

，

player.playerattribute

=>

（（0.playerattribute）

=>

未定义

。还有，

{player.playerattribute.team}

=>

未定义。team

这是否回答了您的问题？

const PlayerProfile = ({ match, location }) => { 
const { params: { cardId } } = match;
const [player, setPlayer] = useState(null);

useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://127.0.0.1:8000/api/player-profiles/${cardId}/?format=json`,
      ).then((result) => {
        setPlayer(result.data);
      });
    };
    fetchData();
  }, []);

return (
    <Container component="main">
        Name: {player?.name}
        Team: {player?.playerattribute?.team}
    </Container>
)
}

export default PlayerProfile;

const [player, setPlayer] = useState({
Name: '',
Team: ''
}}

//on your setPlayer you may 
const playerData = result.data;
setPlayer({
Name: playerData.name
Team: playerData.playerattribute.team})