以下のコードに問題がありますか？私はちらつき問題があり、AdminAreaに入る前にuserAreaを最初にレンダリングします。反応の認証レンダリングの別の表示がちらつき
render(){
const isAdmin = this.props.role === 'admin' ? true : false
return(
<div>
{isAdmin ? <AdminArea /> : <UserArea />}
{this.logout()}
</div>
)
}
そのコードは正常です。 UserAreaがレンダリングされている場合は、最初に「ロール」小道具が「管理者」ではないためです。
これは、コンソールでレンダリングに「ロール」プロップを記録することで確認できます。最初の「ロール」小数点値は、問題の追跡に役立ちます。
私の経験では、ユーザーデータが最初に読み込まれないことがよくあります。ロード後、予想される小道具がそこにあります。私はあなたがここで同じ問題を抱えているかもしれないと思う。このような場合は、userLoadedがtrueのときにuserLoaded propを設定してこのコンポーネントをレンダリングして、ちらつきを避けてください。 userLoaded && <ThisComponent />
私は参照してください。しかし、もし私がローダーを置くことを望まないなら、どうしたらいいですか？ –
大きな質問ですが、私は店舗を清潔に保つために読み込まれていないデータに基づいてチェックを行うことを好む。たとえば、最初に "role" propがnullまたはfalseの場合、私は 'role &&
あなたはこれを実証しているjsfiddleを持っていますか？戻りの前に 'console.log（this.props.role）'をコードに入れて、複数回呼び出されているかどうか確認する価値があります。 – Phil
'？ true：false'は不要な部分です。比較は 'true'または' false'を返します –
@Phil私はフィドルが必要ですか？明らかにレンダリングメソッドは2回レンダリングされます。 –