两个问题跳出来：

1. 你getData从不返回任何东西，所以它的Promise（async函数总是返回一个Promise）undefined如果它不拒绝就会得到满足

2. 错误消息清楚地表明您正在尝试直接呈现PromisegetData返回，而不是等待它解决然后呈现履行值

解决 #1：getData应该返回调用的结果json：

async getData(){
   const res = await axios('/data');
   return await res.json();
}

地址 #2：我们必须查看更多您的代码，但从根本上说，您不能这样做

<SomeElement>{getData()}</SomeElement>

...因为那不会等待决议。您需要改为使用getData来设置状态：

this.getData().then(data => this.setState({data}))
              .catch(err => { /*...handle the error...*/});

...并在渲染时使用该状态：

<SomeElement>{this.state.data}</SomeElement>

更新：现在你已经告诉我们你的代码，你需要做的是这样的：

class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            this.getData().then(data => this.setState({data}))
                          .catch(err => { /*...handle the error...*/});
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}

进一步更新：您已表示偏好使用awaitincomponentDidMount而不是thenand catch。您可以通过在其中嵌套一个asyncIIFE 函数并确保该函数不会抛出来做到这一点。（componentDidMount本身不可能async，没有什么会消耗那个Promise。）例如：

class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            (async () => {
                try {
                    this.setState({data: await this.getData()});
                } catch (e) {
                    //...handle the error...
                }
            })();
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}

根据过去几个月的经验，我意识到实现这一目标的最佳方法是：

class App extends React.Component{
  constructor(){
   super();
   this.state = {
    serverResponse: ''
   }
  }
  componentDidMount(){
     this.getData();
  }
  async getData(){
   const res = await axios.get('url-to-get-the-data');
   const { data } = await res;
   this.setState({serverResponse: data})
 }
 render(){
  return(
     <div>
       {this.state.serverResponse}
     </div>
  );
 }
}

如果您尝试对诸如单击之类的事件发出发布请求，则getData()在事件上调用函数并像这样替换它的内容：

async getData(username, password){
 const res = await axios.post('url-to-post-the-data', {
   username,
   password
 });
 ...
}

此外，如果你做任何请求时，组件即将负载则只需更换async getData()与async componentDidMount()和改变渲染功能，如下所示：

render(){
 return (
  <div>{this.state.serverResponse}</div>
 )
}

Async/Await with axios 

  useEffect(() => {     
    const getData = async () => {  
      await axios.get('your_url')  
      .then(res => {  
        console.log(res)  
      })  
      .catch(err => {  
        console.log(err)  
      });  
    }  
    getData()  
  }, [])