Question

我正在尝试从prop中渲染一个对象到我的组件。但是，我已经可以通过{artist.name}和{artist.genre）成功完成此操作。 {artist.followers.total}失败，并显示以下错误-无法读取未定义的属性总计

import React, {
    Component
} from 'react';
import './App.css';

class Profile extends Component {
    render() {
        // console.log('props from profile.jsx', this.props)
        // let artist = {name:'', followers: {href: '', total: ''}}
        let artist = this.state
        if (this.props.artist !== null) {
            artist = this.props.artist;


        };
        return ( <
            div >
            <
            div > {
                artist.name
            } /* works properly returns artist name name: "Kanye West" */ <
            /div> {
                artist.genres
            } /* works properly returns genres: (4) ["chicago rap", "hip hop", "pop rap", "rap"]*/

            <
            div > {
                artist.followers.total
            }
            /*causes run time error, I expect to see the total number of followers as received from the spotify API ollowers:
href: null
total: 10421208  Returns Cannot read property 'total' of undefined*/


            <
            /div>


            <
            /div>


        )



    }




}
export default Profile;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

尝试一下：

artist.followers && artist.followers.total

Answer 2

您还可以尝试可选链接，以使其表达更短，更简单。

示例

let nestedProp = obj.first?.second;

通过使用?.运算符而不是.，JavaScript知道在尝试尝试之前隐式检查以确保obj.first不是null或undefined访问obj.first.second。如果obj.first是null或undefined，则表达式会自动短路，并返回undefined。

在您的情况下：

let total = artist?.followers?.total

如何解决：无法读取未定义的属性“总计”

2 个答案: