如何在反应导出中的网页上显示承诺的结果

Question

我读过的所有关于 promises 的文章都显示了 console.log 的示例 - 我正在使用 AWS Athena 并希望在我的 React 导出中的网页上显示结果。 React 导出不允许使用 .then。所以我需要解决对外部变量的承诺。

客户端是一个 aws athena 客户端，returns 我需要兑现承诺。

async function getResult(){
try {
    return await client.send(command);
  } catch (error) {
    return error.message;
  }
}

export default getResult()

我想在App.js

中显示结果

render() 
{
return (
   { athena }
)

它显示在控制台而不是网页上，因为在解析变量之前加载了页面。

App.js

的更完整示例

import athena from './athena';
class App extends Component {
render() 
  {
    let athena_result = athena.then(function(result) {
      console.log(result)
    }
    )

  return ( athena_result )

导致错误

Error: Objects are not valid as a React child (found: [object Promise])

Answer 1

您可以使用状态，并在完成后将状态设置为响应的值：

const Component = () => {
  const [athena, setAthena] = useState(""); // Create a state with an empty string as initial value

  // Send a request and on success, set the state to the response's body, and on fall set the state to the error message
  useEffect(() => client.send(command).then((response) => setAthena(response.data)).catch((error) => setAthena(error.message)), []);

  return <>{athena}</>;
};

Answer 2

所有 React 组件的 render 方法被认为是一个纯同步函数。换句话说，应该没有副作用，也没有异步逻辑。错误 Error: Objects are not valid as a React child (found: [object Promise]) 是组件试图呈现 Promise 对象。

使用 React 组件生命周期来发出副作用。 componentDidMount 组件挂载时的任何效果。

class App extends Component {
  state = {
    athena: null,
  }

  componentDidMount() {
    athena.then(result => this.setState({ athena: result }));
  }

  render() {
    const { athena } = this.state;
    return athena;
  }
}

如果您需要在安装组件后稍后发出副作用，那么 componentDidUpdate 是要使用的生命周期方法。

Class 组件仍然有效，短期内没有删除它们的计划，但功能组件确实是前进的方向。这是上面代码的示例函数组件版本。

const App = () => {
  const [athenaVal, setAthenaVAl] = React.useState(null);

  React.useEffect(() => {
    athena.then(result => setAthenaVAl(result));
  }, []); // <-- empty dependency array -> on mount/initial render only

  return athenaVal;
}

代码简单一些。如果愿意，您可以阅读更多关于 React hooks 的内容。

如何在反应导出中的网页上显示承诺的结果

How can I display the result of a promise on a webpage in a react export

javascript

promise

reactjs