Question

我正在尝试从反应组件中的json访问变量。

这是我得到的JSON：

{
    "id": 5,
    "title": "Hello",
    "text": "Hello, this is my first article...",
    "picture": "pic",
    "comments": [],
    "user": {
        "id": 3,
        "name": "Anonim",
        "password": "123456"
    }
}

附加用户是创建帖子的人。附带的评论是与此帖相关的评论列表。在路由中，我正在执行以下操作：

    <Switch>
      <Route path='/' exact component={PostsPage} />
      <Route path='/:id' exact component={PostProfilePage} />
    </Switch>

在反应类组件中

class PostProfile extends Component {

  constructor(props){
    // Pass props to the parent component
    super(props);
    // Set initial state
    this.state = {
      // State needed
      post: []
    };
  }

  componentDidMount() {
    this.fetchPost();
  }

  fetchPost() {
    const {match} = this.props
    const id = match.params.id
    console.log(id)
    fetch('/'+id)
    .then(res => {
      return res.json();
    })
    .then(data => {
      this.setState({
        post: data
      });
    })
    .catch(err => {
      console.log(err);
    });
  }

  render() {
    return (
      <div>
      <li> {this.state.post.title} </li>
      <li> {this.state.post.text} </li>
      </div>
    )
  }
}

export default withRouter(PostProfile)

不起作用

 <li> {this.state.post.user.name} </li>
  <li> {this.state.post.comments...} </li>

为什么我无法访问用户和评论？是否可以在不同的组件中获得用户和评论？（不是一次又一次地调用fetch方法）？

提前谢谢！

Answer 1

您的帖子第一次没有数据，因此您需要以下内容：

＆＃13;

import React, { Component } from 'react';

export default class Test extends Component {
  constructor(props) {
    // Pass props to the parent component
    super(props);
    // Set initial state
    this.state = {
      // State needed
      post: []
    };
  }

  componentDidMount() {
    this.fetchPost();
  }

  fetchPost() {

    fetch('https://swapi.co/api/people/1')
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.setState({
          post: data
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    const show = this.state.post.length === 0 ? 
      <h1> ...loading </h1> 
      : <h1> {this.state.post.birth_year} </h1> 
    return (
      <div>
        <h1> { show } </h1>
      </div>
    )
  }
}

＆＃13;

响应中的json访问值

1 个答案: