Wie Eigenschaften von Objekten in React rendern?

Question

Wo genau sollte ich mit dem Problem umgehen, dass diese Komponente nicht mit dem gewünschten state geladen wird?

Mein Render-Methode den folgenden Fehler verursacht ...

Uncaught TypeError: Cannot read property 'email' of undefined 

... obwohl die JSON.stringify Linie zeigt mir, dass die E-Mail-Eigenschaft hat (schließlich) existieren.

Die console.log down in mapStateToProps bestätigt, dass der Zustand zunächst ohne die Eigenschaft user geladen wird (wodurch der Fehler verursacht wird).

Siehe meinen naiven Versuch, dies in meiner Konstruktor-Methode zu lösen. Es funktioniert nicht.

Was ist der richtige Weg, um mit dieser Situation umzugehen? Einige bedingte innerhalb der Rendermethode? Versuchte das auch, aber immer noch kein Glück.

import React, {Component, PropTypes} from 'react'; 
import {connect} from 'react-redux'; 
import * as actions from '../actions'; 

class Feature extends Component { 

    constructor(props){ 
     super(props); 
     this.state = { 
      'auth': { 
       'user':{ 
        email:'', 
        id:'' 
       } 
      } 
     } 
    } 

    componentWillMount() { 
     this.props.fetchMessage();  // puts the user object into state 
    } 

    render() { 
     return (
      <div className="feature"> 
       Here is your feature 
       {JSON.stringify(this.props.user , null, 2)} 
       {this.props.user.email} 
      </div> 
     ); 
    } 

} 

function mapStateToProps(state) { 
    console.log('state',state); 
    return { user: state.auth.user } 
} 

export default connect(mapStateToProps, actions)(Feature); 

/////////// Aktion /////////

export function fetchMessage(){ 

    return function(dispatch){ 
     axios 
      .get(ROOT_URL, { 
       headers: { 
        authorization: localStorage.getItem('token') 
       } 
      }) 
      .then((response) => { 
       dispatch({ 
        type: FETCH_MESSAGE, 
        payload: response.data.user 
       }) 
      }) 
    } 

} 

/////////////// // Minderer /////////////

var authReducer = (state={}, action) => { 
    console.log('action.payload',action.payload); 

    switch(action.type){ 
     case AUTH_USER: return  {...state, error: '', authenticated: true}; 
     case UNAUTH_USER: return {...state, error: '', authenticated: false}; 
     case AUTH_ERROR: return  {...state, error: action.payload}; 
     case FETCH_MESSAGE: return {...state, user: { 
                 email: action.payload.email, 
                 id: action.payload._id 
                }}; 
     default: return state; 
    }; 
}; 

Answer 1

Redux nutzt ein globalen Zustand genannt store, die außerhalb Ihrer Komponente lebt. In Ihrem constructor haben Sie eine this.state = {...} Anweisung. Dies ist ein lokaler Status, der nur für die Komponente Feature verfügbar ist.

connect von react-redux verbindet im Wesentlichen die Informationen innerhalb der store Ihrer Komponente props daher mapStateToProps genannt.

Bearbeiten Sie Ihre mapStateToProps um so etwas wie ...

function mapStateToProps(state) { 
    const { auth: { user = {} } = {}} = state; 
    return { 
     user 
    } 
} 

Was sie tut, ist zu versuchen, die user Eigenschaft aus dem Laden zu extrahieren, und wenn es noch nicht vorhanden ist, um es zu leeres Objekt gesetzt. Ihr Fehler ist darauf zurückzuführen, dass Ihr mapStateToProps auf die Benutzereigenschaft zugreift, die noch nicht vorhanden ist. Möglicherweise möchten Sie einen Standardwert als initialState festlegen, um dieses Problem zu vermeiden.

Answer 2

Also hier ist was passiert .. Sie machen eine Server-Anfrage für ein user Objekt und bei Erfolg wird das empfangene Objekt in Ihrem Redux-Shop gespeichert. Während der Durchführung einer solchen Aktion die Komponente wiedergegeben wird, wie folgt:

1. Sie haben die Anfrage an den Server initiiert, die zur Zeit bedeutet, dass kein user in Ihrem Geschäft ist und so wird das Bauteil mit this.props.userundefined gemacht.

2. Ihre Anfrage ist erfolgreich und das Objekt user ist in Ihrem Geschäft gespeichert. Wenn das passiert, wird react-redux Ihre Komponente mit dem Benutzerobjekt erneut rendern und this.props.user ist in Ihrer Komponente verfügbar.

   Während der ersten Schritt seit this.props.user nicht verfügbar ist, erhalten Sie einen Fehler beim Zugriff auf this.props.user.email. Obwohl die Antwort von @jpdelatorre ziemlich gut ist, können Sie einfach Ihre Rendermethode einchecken.

   render() { 
       let user = this.props.user || {}; 
       .... 
        {user.email} 
       .... 
   }