我从一个API中获取了这些数据。
{
"id": "01",
"title": "xxxx",
"imagePath": "/courses/xxx.jpg",
"price": {
"early_bird": 300,
"normal": 500
},
"dates": {
"start_date": "2023-01-12",
"end_date": "2023-02-05"
},
"duration": "3 weeks",
"online": true,
"description": "xxxx"
}
当我尝试访问data.price.normal
时,出现此错误
无法读取未定义的属性(阅读“normal”)
我的密码是
export default function CourseSinglePage() {
const { id } = useParams(); // Get the id parameter from the URL
var _data = getCourse(id);
console.log(_data)
return (
<Card>
<CardMedia
component="img"
height="200"
image={_data.imagePath}
alt={_data.title}
/>
<CardContent>
<Typography variant="h5" component="h2">
{_data.title}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{_data.description}
</Typography>
<Typography variant="body2" color="textSecondary" component="p" >
Price: {_data.price.normal}| Online : {_data.online ? <CheckCircle color="success" fontSize='5'/> : <Cancel color="error" fontSize='5' />}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Duration:{_data.duration}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Dates:
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Description: {_data.description}
</Typography>
</CardContent>
</Card>
);
};
如果我删除_data.price.normal
并将其留空,则可以正常工作
export function getCourse(id){
const [data, setData] = useState([]);
useEffect(() => {
axios.get(`http://localhost:3001/courses/${id}`)
.then(response => {
setData(response.data);
})
.catch(error => {
console.log(error);
});
}, []);
return data;
}
我试着像这样访问它_data.price['normal']和this _data['price].normal
2条答案
按热度按时间qncylg1j1#
只需添加一些验证。
你的一些数据肯定漏掉了价格。
最新的ecmascript规范支持可选链接(
_data?.price?.normal
),但根据环境,可能不支持该语法。因此,您可以用途:
_data.price && _data.price.normal
并且避免试图从未定义的值读取数据。
j9per5c42#
data.price.normal这个方法只是正确的,首先你需要把相同的数据存储在一个变量中,然后提取它就可以了。