Question

我调用api的代码是：

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class Hello extends React.Component{
 constructor(props){
    super(props);
    this.state={
        data: "good"
    }
    this.setdata=this.setdata.bind(this);
 }
 setdata(){
    return axios.get("http://52.14.161.145/1").
    then(res=>{
        return res.json;
    });
 }
 componentDidMount(){
    this.setdata().then(res=>{console.log(res);this.setState({data: res})});
 }
render(){
    return (<div><p>{this.state.data}</p></div>);
  }
 }
export default Hello;

我还知道react方法的生命周期以及axios和fetch api调用的异步特性。我可以在chrome的网络标签中看到响应，但是setdata始终返回未定义。另外请注意，我捆绑了React代码，并通过Express服务器提供它。

如何解决此问题？

Answer 1

我认为应该是

const response = await fetch("http://52.14.161.145/1",{
 headers:{
  "Content-Type":"application/json"
 }
});
console.log(await response.json())

Answer 2

您可以通过这种方式实现。
更好地设置您要获得响应的状态。
这不是fetch调用，不需要axios res.json。

您将在res.data

中获取数据

 setdata(){
   axios.get("http://52.14.161.145/1").
    then(res=>{
      console.log(res.data);
      this.setState({data: res.data})
     });
   }

componentDidMount(){
 this.setdata();
}

axios和fetch在React中返回空的响应数据

2 个答案: