Reagieren ausdrucken.Requisiten nur, wenn der Wert nicht null

Also ich habe zwei einfache Klassen Reagieren

Dashboard (Eltern)

class UserDashboardPage extends Component {
  render() {
    console.log("UserDashboardPage")
    console.log(this.props.users)
    return (
      <div>
        <UserInfoComponent user={this.props.users} />
      </div>
    );
  }
}

//map Users from store to Props
function mapStateToProps({ users }) {
  return { users };
}

UserInfoComponent (Kind)

export class UserInfoComponent extends Component {
  render() {
    console.log("UserInfoComponent")
    console.log(this.props.user)
    return (
      <h2>{this.props.user.firstName}</h2>
    );
  }
}

und das problem, das ich habe ist, dass ich ausgeben wollen this.props.user.firstName im UserInfoComponent aber der Wert ist zunächst null und dann die Komponente nicht neu Rendern, wenn der Wert bekommt die Daten.

userReducers

const initialState = { data: [], user: null };

const UserReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_USER :
      return {
        data: [action.user, ...state.data],
      };
    case UPDATE_USER :
      return {
        user: action.user,
      };
    case LOGIN_USER: {
      const user = (action.response.statusCode === 200) ? action.response.user : null;

      console.log(user);

      return {
        user,
      };
    }
    default:
      return state;
  }
};

Beispiel, wie die Daten sich ändern

Können Sie zeigen Sie Ihre reducer-Funktion? den meisten Fällen auftreten, aufgrund von einer Unveränderlichkeit problem
Gerade aktualisiert. Ist das, was das, was man benötigt?
es tut werfen jede Konsole Fehler? Da hast du Zugriff auf firstName auf ein null-Objekt in UserInfoComponent
Nein, es funktioniert einfach nicht drucken, die firstName. Die Konsole ist die Verbindung, die ich freigegeben.

InformationsquelleAutor pbgnz | 2017-02-14

reactjs redux

1

In Ihrem reducer nur ändern const initialState = { data: [], user: null } zu const initialState = { data: [], user: {} }; Durch den ersten Staat der Benutzer ein leeres Objekt können Sie vermeiden Probleme mit this.props.user['property'] verursacht eine kann nicht Lesen der Eigenschaft undefined Fehler.

Darüber hinaus sollten Sie wahrscheinlich etwas anderes, wenn zunächst der Benutzer ein leeres Objekt. Wenn Sie dabei sind, ein AJAX-request Holen Sie sich die user-info, dann denken Sie vielleicht dabei ein beim laden der Komponente. Würden Sie gerade brauchen, um einen neuen Status hinzuzufügen, um Ihre reducer etwa so:
```
const initialState = { data: [], user: {}, loading: true };
```
und dann sobald Sie die Benutzer-info zurück, vorausgesetzt, das vom login-Benutzer sind, können Sie die Druckminderer-set loading: false auch sollten Sie entweder mit dem Objekt.zuweisen oder die ... Betreiber zu vermeiden, mutiert der ursprüngliche Zustand. sehen http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html. Updates, damit Ihr Reduzierstücke würde wie folgt Aussehen
```
const UserReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_USER :
      return {
        ...state,
        data: [action.user, ...state.data],
      };
    case UPDATE_USER :
      return {
        ...state,
        user: action.user,
      };
    case LOGIN_USER: {
      const user = (action.response.statusCode === 200) ? action.response.user : null;

      console.log(user);

      return {
        ...state,
        user,
        loading: false
      };
    }
    default:
      return state;
  }
};
```
und dann in Ihre UserDashboard Komponente
```
class UserDashboardPage extends Component {
  render() {
    console.log("UserDashboardPage")
    console.log(this.props.users)

    const content = this.props.loading ? '....loading' : <UserInfoComponent user={this.props.users} />;
    return (
      <div>
        {content}
      </div>
    );
  }
}
```
dies wird sicherstellen, dass es zeigt laden und dann, wenn der Benutzer geladen werden, zeigen den Anwendern, Informationen.

das funktionieren würde, aber es stellt sich heraus, mein problem war ein client-und server-Reduzier-mismatch.

InformationsquelleAutor finalfreq
0

Ist es möglich, dass Sie wollte Rendern eines UserInfoComponent für jeden Eintrag in der users Eigenschaft.

Wenn users ist ein array von user Objekten, die Sie vielleicht tun möchten
```
{ users.map((user) => (<UserInfoComponent user={user} />) }
```
Sonst, entweder ein leeres Objekt als default-Wert für users (mit defaultProps) oder prüfen auf die Existenz eines users Wert in Ihrem mapStateToProps Funktion.

InformationsquelleAutor gkats

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.