React JSX Component and Await

问题

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.

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>
    )

This returns: A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

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

回答1:

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

来源：https://stackoverflow.com/questions/44659360/react-jsx-component-and-await