React 无法渲染状态属性

Question

我不断收到类型错误：无法读取属性... 我将状态设置为来自 fetch 响应的 JSON 对象。对象的 String 和 Date 属性似乎渲染得很好，但 Array 和 Number 属性不断出现类型错误。

class ViewPost extends Component {
    state = {
      post: {}
    }

    constructor(props) {
      super(props);
      this.setPostState = this.setPostState.bind(this);
    }

    componentWillMount() {
      this.setPostState();
    }

    setPostState() {
      let postTitle = this.props.match.params.id;
      fetch('/posts/getpost', {
        method: 'post',
        headers: {
          'Accept': 'application/json, text/plain, */*',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          title: postTitle
        })
      })
      .then(res => res.json())
      .then(post => this.setState({ post }))
    }

    render() {
      return (
        <div className="Post">
          <div className="card">
            <img className="img-fluid" src="/img/darkstockphoto.jpg" alt="Post"/>
            <div className="card-body">
              <h4 className="card-title">{this.state.post.title}</h4>
              <p className="card-text">{this.state.post.author}</p>
              <p className="card-text">{this.state.post.date}</p>
              <p className="card-text">{this.state.post.body}</p>
            </div>
          </div>
          <hr />
          {this.state.post.comments && this.state.post.comments.map(comment => (
            <div key={comment.author + comment.date} className="card card-body">
              <h4 className="card-title">{comment.title}</h4>
            </div>
          ))}
        </div>
     );
   }
}

export default ViewPost;

Answer 1

setState 是异步的，所以你需要像这样处理你的this.state.post：

render() {

  if (this.state.post) {
    return (<div className="Post">
      <div className="card">
        <img className="img-fluid" src="/img/darkstockphoto.jpg" alt="Post"/>
        <div className="card-body">
          <h4 className="card-title">{this.state.post.title}</h4>
          <p className="card-text">{this.state.post.author}</p>
          <p className="card-text">{this.state.post.date}</p>
          <p className="card-text">{this.state.post.body}</p>
        </div>
      </div>
      <hr/> {
        this.state.post.comments && this.state.post.comments.map(comment => (<div key={comment.author + comment.date} className="card card-body">
          <h4 className="card-title">{comment.title}</h4>
        </div>))
      }
    </div>);
  }

  return null;
}