reactjs - 无法在 react 中访问对象内的对象属性

Question

我似乎无法访问对象中对象的一部分的数据。在这里，我尝试访问个人资料中的点赞，否则使用普通 javascript 打印出 this.state.data.profile.likes 就可以了

class App extends Component {
     constructor(props) {
        super(props);
        this.state = {
            data: {}
        };
     }

     componentDidMount() {
         var x = {      
             "notifications": 12,
             "profile": {
                 "likes": 5
             }
         };
         this.setState({
             data: x
         });
     }


    render() {
        const {notifications, profile} = this.state;
        return (
            <div>
                <span>Notifications {notifications}</span>
                <span>Likes {profile.likes}</span>
            </div>
        );
}

Answer 1

在安装之前 - 以及在初始渲染时 - 您的状态如下所示:

{
  data: {}
}

安装后 - 在第二次渲染上 - 您的状态如下所示:

{
  data: {
    notifications: 12,
    profile: {
      likes: 5
    }
  }
}

您正在尝试访问不存在的 this.state.profile.likes。大概您的意思是访问确实存在的 this.state.data.profile.likes ，但仅在第二次渲染时访问。