React中如何将AWS Athena返回的Promise结果渲染到网页

报错的核心原因是你直接将Promise对象作为React子元素返回，React不支持直接渲染Promise类型的值，必须等待Promise状态变为fulfilled/rejected后，将解析出的结果/错误存入组件状态，再渲染状态中的值。

第一步：调整athena.js导出逻辑 #

你当前直接导出getResult()的执行结果（即Promise实例），改为导出getResult函数本身即可：

// athena.js
async function getResult(){
  try {
    return await client.send(command);
  } catch (error) {
    return error.message;
  }
}
// 导出函数，而非执行后的Promise
export default getResult

第二步：改写App.js组件逻辑 #

在类组件的componentDidMount生命周期中触发异步请求，拿到结果后通过setState存入组件状态，render函数只负责渲染状态中的值，同时补充加载、错误状态的处理：

// App.js
import React, { Component } from 'react';
import getAthenaResult from './athena';

class App extends Component {
  state = {
    result: null,
    loading: true,
    error: null
  }

  componentDidMount() {
    // 组件挂载完成后发起Athena请求
    getAthenaResult()
      .then(res => {
        this.setState({
          result: res,
          loading: false
        })
      })
      .catch(err => {
        this.setState({
          error: err.message,
          loading: false
        })
      })
  }

  render() {
    const { loading, result, error } = this.state;
    // 加载状态
    if (loading) return <div>数据加载中...</div>;
    // 错误状态
    if (error) return <div>请求失败：{error}</div>;
    // 渲染结果：如果是对象请按需提取字段，或用JSON.stringify转成字符串展示
    return (
      <div>
        {typeof result === 'object' ? JSON.stringify(result, null, 2) : result}
      </div>
    );
  }
}

export default App;

注意事项 #

• 不要在render方法中执行异步请求或调用.then，render是纯函数，每次组件更新都会触发，会导致重复请求，也无法拿到可直接渲染的值
• 如果Athena返回的是复杂对象，不要直接渲染整个对象，按需提取字段展示即可，避免再次出现「对象不能作为React子元素」的报错
• 如果后续升级为函数组件，使用useState+useEffect组合可以实现完全相同的逻辑，写法更简洁。

内容的提问来源于stack exchange，提问作者Jonathan Harker