Javascript Can'；t从REACT中的JSON调用访问单个对象中的嵌套对象属性

我正在进行一个Rails API调用并返回一个JSON对象，该对象包含一个嵌套的用户对象和一个标记列表数组。但是，我无法访问嵌套对象

this.props.post.user.name抛出： 无法读取未定义的属性“name”

我很困惑，因为当我在PostsIndex.js中调用PostsIndex并获取一个对象数组并通过它映射时，我可以访问所有内容

当我只处理一个对象时，我需要做什么

PostShow.js

import React, {Component} from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';



export default class PostShow extends Component {

constructor(props) {
  super(props)
  this.state = {
    post: {}
  };
}

componentDidMount() {
  const { match: { params } } = this.props;
  axios
    .get(`/api/posts/${params.postId}`)
    .then(response => {
      console.log(response);
      this.setState({ post: response.data});
    })
    .catch(error => console.log(error));

}

  render() {
    return (
      <div>
            <Post post={this.state.post}/>
      </div>
    );
  }
}

class Post extends Component {

  constructor(props) {
    super(props)
  }

  render() {

    return (
      <div>
        <div className="centered">
          <small className ="small" >  | Posted by: {this.props.post.user.name}  on   | Tags:  </small>
          <h3>{this.props.post.title}</h3>
          <img className="image " src={this.props.post.image}/>
        </div>
        <div>
          <p className = "songTitle"> {this.props.post.song_title} </p>
          <p className= "postBody"> {this.props.post.body} </p>
          <div className = "link" dangerouslySetInnerHTML={{ __html: this.props.post.link }} />
        </div>
      </div>
    );
  }
} 

import React，{Component}来自'React'；
从“axios”导入axios；
从'react router dom'导入{Link}；
导出默认类PostShow扩展组件{
建造师（道具）{
超级（道具）
此.state={
职位：{}
};
}
componentDidMount（）{
const{match:{params}}=this.props；
axios
.get（`/api/posts/${params.postId}`）
。然后（响应=>{
控制台日志（响应）；
this.setState（{post:response.data}）；
})
.catch（错误=>console.log（错误））；
}
render（）{
返回(
);
}
}
类Post扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
|发布人：{this.props.post.user.name}在|标记上：
{this.props.post.title}
{this.props.post.song\u title}
{this.props.post.body}
);
}
} 

以下是/api/posts/7中JSON对象的外观：

{“id”：7，
“标题”：“adgaadg”，
“正文”：“ADGADGD”，
“post_类型”：“视频”，
“标签列表”：[“ERL”]，
“image”：“/images/original/missing.png”，
“歌名”：“adgdgdgd”，
“创建时间”：“2018-08-11T21:57:00.447Z”，
“用户”：{“id”：2，“姓名”：“John”，“bio”：“bio”，“位置”：“Reno”}

这是因为在您的请求完成之前，

此.props.post.user

将

未定义

，尝试访问上的

名称将导致您的错误

例如，您可以将初始的
post
设置为
null
，在请求完成之前不呈现任何内容

示例

class PostShow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      post: null
    };
  }

  componentDidMount() {
    const {
      match: { params }
    } = this.props;
    axios
      .get(`/api/posts/${params.postId}`)
      .then(response => {
        console.log(response);
        this.setState({ post: response.data });
      })
      .catch(error => console.log(error));
  }

  render() {
    const { post } = this.state;

    if (post === null) {
      return null;
    }

    return (
      <div>
        <Post post={post} />
      </div>
    );
  }
}

class PostShow扩展组件{
建造师（道具）{
超级（道具）；
此.state={
post:null
};
}
componentDidMount（）{
常数{
匹配：{params}
}=这是道具；
axios
.get（`/api/posts/${params.postId}`）
。然后（响应=>{
控制台日志（响应）；
this.setState（{post:response.data}）；
})
.catch（错误=>console.log（错误））；
}
render（）{
const{post}=this.state；
如果（post==null）{
返回null；
}
返回(
);
}
}
axios.get
是一个异步操作，
在
这个.setState（{post:response.data}）之前呈现
这意味着当Post组件呈现
此.state时。Post
为空对象。所以，您可以做的是，在构造函数中用null初始化post

this.state = {
   post: null
};

而不是
do
{this.state.post&&&}
，它将仅在post存在且不为null时呈现post