Question

我正在进行Rails API调用，并返回具有嵌套用户对象和标签列表数组的单个JSON对象。但是，我无法访问嵌套对象。

this.props.post.user.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>
    );
  }
}

这是/ api / posts / 7中的JSON对象的样子：

{"id":7, "title":"adgaadg", "body":"adgadgagdgd", "post_type":"Video", "tag_list":["ERL"], "image":"/images/original/missing.png", "song_title":"adgdgdgd", "created_at":"2018-08-11T21:57:00.447Z", "user":{"id":2,"name":"John","bio":"bio","location":"Reno"}}

Answer 1

这是因为this.props.post.user将在您的请求完成之前为undefined，并且尝试访问name会引发错误。

您可以例如将初始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>
    );
  }
}

Answer 2

row是一个异步操作，enumerate在axios.get之前渲染，这意味着Post组件渲染<Post post={this.state.post}/>时为空对象。因此，您可以做的是，在构造函数

中使用null初始化您的帖子

this.setState({ post: response.data});

，而不是this.state.post执行this.state = { post: null };，它将仅在帖子存在且不为空的情况下呈现帖子。

无法通过REACT中的JSON调用访问单个对象中的嵌套对象属性

2 个答案: