React JS中如何获取并显示Promise的返回值？

直接将Promise赋值给变量的方式行不通，因为Promise是异步对象，无法直接渲染到页面。你需要借助React的状态管理来处理异步数据，以下是具体实现方式：

函数组件方案（推荐） #

使用useState存储异步结果，useEffect执行异步操作：

import { useState, useEffect } from 'react';

function YourComponent() {
  // 初始化状态，用于保存异步获取的数值
  const [count, setCount] = useState(null);

  useEffect(() => {
    // 调用异步函数，获取结果后更新状态
    getNumScopeStatus("TOBESAMPLED")
      .then(res => setCount(res))
      .catch(err => console.error('数据获取失败:', err));
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  return (
    <div className="result">
      {/* 显示加载提示直到数据获取完成 */}
      {count === null ? '加载中...' : count}
    </div>
  );
}

类组件方案 #

如果使用类组件，可通过state和componentDidMount实现：

import React from 'react';

class YourComponent extends React.Component {
  state = { count: null };

  componentDidMount() {
    getNumScopeStatus("TOBESAMPLED")
      .then(res => this.setState({ count: res }))
      .catch(err => console.error('数据获取失败:', err));
  }

  render() {
    const { count } = this.state;
    return (
      <div className="result">
        {count === null ? '加载中...' : count}
      </div>
    );
  }
}

核心原理 #

• 异步操作完成前，状态值为初始的null，可显示加载提示优化体验；
• 当Promise的then回调触发时，更新React状态，触发组件重新渲染，页面就会显示最终的结果值"8"；
• 加入catch捕获可能的错误，避免异步操作失败导致页面异常。

内容的提问来源于stack exchange，提问作者Kristin Chia