当我尝试从节点API获取数据时

Question

我试图在我的React App中将fetch（）方法用于componentDidMount（）方法。

它可以在邮递员上使用，我可以从URL中获取数据。

这是react App中的代码：

class WorldMap extends Component {
  constructor(){
    super()

    this.state = {
      zoom: 1,
      color: "#39464E",
      test: ''
    }
  }

  componentDidMount() {
    setTimeout(() => {
      ReactTooltip.rebuild()
    }, 100)

    //get all countries in db
    fetch('http://localhost:3000/country/20', {
      method: 'GET',
      headers: {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json',
      },
    })
    .then(data => {
      this.setState({test: data.name_fr})
    })
  }

  countryClick(geography){ 
    console.log(test)
  }
}

这是我尝试检索数据时在邮递员中得到的内容：

问题是单击国家（地区）时，我在控制台中未定义。

Answer 1

在邮递员的json结构中，您似乎需要访问回复的data.name_fr。另外fetch的默认值是get，您不需要那些额外的标题。您的提取代码可以简化为：

fetch('http://localhost:3000/country/20')
  .then(res => res.json())
  .then(body => console.log(body.data.name_fr))

Answer 2

您的数据访问错误。在您的then中，data将是具有data，error和message属性的整个结果对象。如果在将data对象分配给状态之前完全记录了该对象，则可能会注意到您对传递给您的内容的假设是错误的。下次，我建议使用带有断点的devtools调试和/或设置日志以跟踪问题所在。

.then(data => {
  this.setState({test: data.name_fr})
})

应该是

.then(results => {
  this.setState({test: results.data.name_fr})
})

Answer 3

将您的抓取更改为此：

fetch('http://localhost:3000/country/20', {
  method: 'GET',
  headers: {
    'Accept' : 'application/json',
    'Content-Type' : 'application/json',
  },
})
.then(data => data.json())
.then(jsonData => 
this.setState({test:jsonData.name_fr})
)