使用API​​之外的数据（React）

Question

我从API提取中收到一组对象，但我无法通过＆lt; ResponseTable数据= {} /＆gt;如果我通过汽车，它会起作用。

＆＃13;

＆＃13;

import React from 'react'
import ResponseTable from './responsetable'

var car = [{type:"Fiat", model:"500", color:"white"}];

class Table extends React.Component{
  constructor(props){
    super(props);
    this.state = {};
  }

  fetchData() {
    return fetch('http://localhost:8000/sprints/23')
    .then(function(response) {
      console.log(response.json);
    })
    .then(function(myJson) {
      return myJson;
    });
  }

  componentDidMount(){
    this.fetchData();
  }

  render(){
    return(
      <div>
        <ResponseTable data={} />
      </div>
    );
  }
}

export default Table;

＆＃13;

＆＃13;

＆＃13;

欢迎任何帮助！

Answer 1

将响应设置为状态。 car有效，因为它来自全球范围。

class Table extends React.Component{

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

  fetchData() {
    return fetch('http://localhost:8000/sprints/23')
    .then(function(response) {
      console.log(response.json);
    })
    .then((myJson) => {
      this.setState({data: myJson});
    });
  }

  componentDidMount(){
    this.fetchData();
  }

  render(){
    return(

      <div>
        <ResponseTable data={this.state.data} />
      </div>

      );
  }
}

Answer 2

解决获取后，您需要设置状态组件，然后将该状态传递给ResponseTable数据

class Table extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      myJson: null // define as null
    }
  }

  fetchData() {
  return fetch('http://localhost:8000/sprints/23')
  .then((response) => {
    console.log(response.json);
  })
  .then((myJson) => {
    this.setState({myJson: myJson})
  });
  }

  componentDidMount(){
    this.fetchData();
  }

  render(){
    return(

      <div>
        <ResponseTable data={this.state.myJson} />
      </div>

      );
  }
}

export default Table;

注意我们将myJson状态设置为null。

然后我们获取数据。我已将.then函数更改为箭头函数，以便this作用于组件。

然后我们将this.state.myJson作为属性传递给您的子组件

Answer 3

为什么不将响应抛入状态对象以作为道具传递？

import React from 'react'
import ResponseTable from './responsetable'

var car = [{type:"Fiat", model:"500", color:"white"}];


class Table extends React.Component{

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

  fetchData() {
  return fetch('http://localhost:8000/sprints/23')
  .then(function(response) {
    this.setState({data: response.json})
    console.log(response.json);
  })
  }

   componentDidMount(){
    this.fetchData();
  }

  render(){
    return(

      <div>
        <ResponseTable data={this.state.data} />
      </div>

      );
  }
}

export default Table;