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

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 总是返回未定义。 另请注意，我正在捆绑反应代码并通过快速服务器提供服务。

我该如何解决这个问题？

Answer 1

• 您可以通过这种方式实现。

• 最好将您的状态设置为获得响应的位置。

• 这不是fetch调用，在axiosres.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();
  }
  

Answer 2

我觉得应该是

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