javascript类型错误:无法读取未定义的属性(阅读“something”)

wpx232ag  于 2023-03-11  发布在  Java
关注(0)|答案(2)|浏览(148)

我从一个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

qncylg1j

qncylg1j1#

只需添加一些验证。
你的一些数据肯定漏掉了价格。
最新的ecmascript规范支持可选链接(_data?.price?.normal),但根据环境,可能不支持该语法。
因此,您可以用途:
_data.price && _data.price.normal
并且避免试图从未定义的值读取数据。

j9per5c4

j9per5c42#

data.price.normal这个方法只是正确的,首先你需要把相同的数据存储在一个变量中,然后提取它就可以了。

相关问题