2017-06-20 13 views
1

私は結果を使用して、Reactネイティブアプリケーションでjsxコンポーネントを条件付きでレンダリングする非同期/待機関数を持っています。JSXコンポーネントに反応して応答する

これは、約束を返すクラスメソッドです。このメソッドにはasyncが宣言されています。

問題は、この結果を使用して、一部のjsxを条件付きでレンダリングすることです。

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

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

これが返されます。 が有効な要素(またはnull)と反応返さなければなりません。未定義、配列またはその他の無効なオブジェクトが返された可能性があります。

どのように私はこれを試みることができますか?何でも感謝します。

+2

'render'は非同期であってはなりません。 – Bergi

+0

その非同期呼び出しを 'componentDidMount'に入れ、結果を反応状態に保存します – azium

+0

reduxを使用している場合も同じですか?結果を反応状態にプッシュしてレンダリングで使用しますか? –

答えて

0

componentDidMountを移動し、その結果を非同期にしてからsetStateにすると、レンダリングで使用できるようになります。レンダリングを非同期にすることはできません。

関連する問題