TrackerReact Container - Benutzer hat profile.avatar gesetzt, aber Konsole sagt es nicht definiert ist

Question

ich einen TrackerReact Behälter haben ProfileSettingsContainer genannt, die Meteor.user() auf eine user() Funktion gibt und übergibt sie an die ProfileSettings Komponente. Mein ultimatives Ziel ist es, eine Einstellungsseite für ein Benutzerprofil zu erstellen, in der ein Benutzer seinen Avatar ändern und andere Informationen aktualisieren kann. Hier ist mein Code.

profile_settings_container.js

import React, { Component } from 'react'; 
import TrackerReact from 'meteor/ultimatejs:tracker-react'; 

import ProfileSettings from './profile_settings'; 

export default class ProfileSettingsContainer extends TrackerReact(Component) { 
    user(){ 
    return Meteor.user(); 
    } 

    render() { 
    let user = this.user; 

    return (
     <ProfileSettings user={user} /> 
    ); 
    } 
} 

profile_settings.js

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 

export default class ProfileSettings extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     avatar: props.user.profile.avatar || "../../../public/user-default.svg" 
    } 
    } 

    componentWillMount(){ 
    // we create this rule both on client and server 
    Slingshot.fileRestrictions("avatar", { 
     allowedFileTypes: ["image/png", "image/jpeg", "image/gif"], 
     maxSize: 2 * 500 * 500 
    }); 
    } 

    upload(){ 
    var userId = Meteor.user()._id; 
    var metaContext = {avatarId: userId}; 
    var uploader = new Slingshot.Upload("UsersAvatar", metaContext); 
    uploader.send(document.getElementById('input').files[0], function (error, downloadUrl) { // you can use refs if you like 
     if (error) { 
     console.error('Error uploading', uploader.xhr.response); 
     alert (error); 
     } 
     else { 
     Meteor.users.update(Meteor.userId(), {$set: {"profile.avatar": downloadUrl}}); 
     } 
     this.setState({avatar: downloadUrl}); 
    }.bind(this)); 
    } 

    formSubmit(){ 
    let avatarUrl = this.state.avatar; 
    Meteor.users.update({_id: Meteor.userId() }, { 
     $set: {'profile.avatar': avatarUrl} 
    }); 
    } 

    render() { 
    return (
     <div> 
     <div className="sticky-header"> 
      <h3>Settings</h3> 
     </div> 

     <form> 
      <div className="row well"> 
      <div className="col-md-6"> 
       <div className="form-group"> 
       <label htmlFor="exampleInputFile">File input</label> 
       <input type="file" id="input" onChange={this.upload.bind(this)} /> 
       <p className="help-block">Image max restriction: 2MB, 500x500. Cropped: 200x200</p> 
       </div> 
      </div> 
      <div className="col-md-6 utar-r"> 
       <img src={this.state.avatar} height="200" width="200" alt="..." className="img-rounded" /> 
      </div> 
      <div className="form-group"> 
       <button className="btn btn-lg btn-primary btn-block" type="submit" onClick={this.formSubmit.bind(this)}>Update Profile</button> 
      </div> 
      </div> 
     </form> 

     <footer className="sticky-footer"> 
      <Link to="/app/profile"> 
      <button className="profile-edit bg-black"> 
       <h3>Cancel</h3> 
      </button> 
      </Link> 
      <Link to=""> 
      <button className="profile-edit"> 
       <h3>Save Changes</h3> 
      </button> 
      </Link> 
     </footer> 
     </div> 
    ); 
    } 
} 

Hier ist die Konsole Fehler ich erhalte, wenn die Seite Einstellungen laden: profile_settings.js:11Uncaught TypeError: Cannot read property 'avatar' of undefined

Zusätzlich dazu Ich habe RoboMongo überprüft und kann bestätigen Hat user.profile.avatar existiert. Ich weise das Standardbild von "/user-default.svg" in der Accounts.createUser()-Funktion in der Komponente zu.

Answer 1

Benutzer kann noch nicht geladen (definiert) sein, so dass nur setzen smth wie if (user) return(<ProfileSettings user={user}/>) else return ""