反应JSX组件并等待 [英] React JSX Component and Await

问题描述

我有一个async/await函数，我想使用其结果在我的React本机应用程序中有条件地呈现jsx组件.

I have an async/await function of which I want to use the result to conditionally render a jsx component in my React native application.

这是一个返回诺言的类方法.该方法已声明异步.

This a class method that returns a promise. The method has async declared.

问题是我想使用此结果有条件地渲染一些jsx.

The problem is I want to use the result of this to conditionally render some jsx.

const hasEdit = await perms.has('/page', 'edit');

return (
      <div>
      { hasEdit &&
        <Button
          icon='pencil'
          text='EDIT'
          onTouchTap={ () => { props.onEdit(); } }
        />
      }
      </div>
    )

这将返回: 必须返回有效的React元素(或null).您可能返回了undefined，数组或其他无效对象.

有什么主意我可以尝试吗?任何事情都将不胜感激.

Any idea how I can attempt this? Anything would be appreciated.

推荐答案

建议移动componentDidMount，使其异步，然后对结果进行setState使其在渲染中可用.渲染不能异步.

The suggestion of moving componentDidMount, making it async and then setState on the result makes it available in render. Render can not be async.

这篇关于反应JSX组件并等待的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！