reagieren auth rendern andere Ansicht flackern

Alles falsch mit dem Code unten? Ich habe ein Flimmerproblem, es wird userArea zuerst rendern, bevor ich in AdminArea gehe.reagieren auth rendern andere Ansicht flackern

render(){ 

     const isAdmin = this.props.role === 'admin' ? true : false 

     return(
      <div> 
       {isAdmin ? <AdminArea /> : <UserArea />} 
       {this.logout()} 
      </div> 
     ) 
    }

Quelle

2017-12-18 Jenny Mok

Haben Sie ein Kind, das das demonstriert? Es könnte sich lohnen, eine 'console.log (this.props.role)' in den Code vor der Rückkehr zu setzen, um zu sehen, ob sie mehrmals aufgerufen wird. – Phil

'? wahr: falsch ist ein unnötiger Teil. Der Vergleich liefert 'true' oder' false' –

@Phil brauche ich eine Geige? Es ist klar, dass die Rendermethode zweimal rendern wird. –

Dieser Code sieht gut aus. Wenn UserArea rendert, liegt das daran, dass die Property "role" anfänglich nicht "admin" ist.

Sie können dies beobachten, indem Sie die Property "role" in Ihrem Rendering über die Konsole protokollieren. Der anfängliche "Rollen" -Propwert sollte Ihnen helfen, das Problem aufzuspüren.

Meiner Erfahrung nach, Flackern ist oft die Benutzerdaten werden zunächst nicht geladen. Nach dem Laden ist die erwartete Prop vorhanden. Ich vermute, dass Sie hier dasselbe Problem haben. Wenn dies der Fall ist, vermeiden Sie Flackern, indem Sie eine userLoaded-Prop und diese Komponente rendern, wenn userLoaded wahr ist. userLoaded && <ThisComponent />

Quelle

2017-12-18 15:06:10 skylerfenn

Ich sehe. Aber was, wenn ich keinen Lader einsetzen möchte? –

Große Frage, ich bevorzuge diese Überprüfung basierend auf Daten, die nicht geladen werden, um den Speicher sauber zu halten. Wenn zum Beispiel die Property "role" anfänglich null oder false ist, verwende ich 'role && '. Wenn die Rolle einen Wert als Benutzer oder Administrator hat, wird die Komponente gerendert. Es wäre cool zu sehen, ob jemand anders eine andere Lösung hat. So habe ich es gehandhabt. – skylerfenn

reagieren auth rendern andere Ansicht flackern

Antwort

Verwandte Themen