在React/JSX中显示嵌套的JSON

Question

我有一些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;

然而，我得到了这个错误：TypeError: Cannot read property 'team' of undefined

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

Answer 1

如果投影值是一个对象，您可能不应该用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;

或

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;

Answer 2

设置useStateconst [player, setPlayer] = useState("");

Answer 3

const [player, setPlayer] = useState({
Name: '',
Team: ''
}}
//on your setPlayer you may 
const playerData = result.data;
setPlayer({
Name: playerData.name
Team: playerData.playerattribute.team})

如果您仍然收到相同的错误，请提供console.log(result)的屏幕截图