TrackerReactコンテナ - ユーザーが設定profile.avatar持っていますが、コンソールは、それは私が<code>user()</code>関数に<code>Meteor.user()</code>を返し、<code>ProfileSettings</code>コンポーネントに渡し<code>ProfileSettingsContainer</code>呼ばTrackerReactコンテナを持って

Question

未定義だと言います。私の最終的な目標は、ユーザーが自分のアバターを変更して他の情報を更新できるユーザーのプロファイルの[設定]ページを作成することです。ここに私のコードです。

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> 
    ); 
    } 
} 

設定ページをロードするときに私が得るのコンソールエラーです。これに加えてprofile_settings.js:11Uncaught TypeError: Cannot read property 'avatar' of undefined

私はRoboMongoをチェックして、tを確認することができますhat user.profile.avatarが存在します。 signupコンポーネントのAccounts.createUser()機能で、デフォルトイメージ "/user-default.svg"を割り当てます。

Answer 1

ユーザーはそうif (user) return(<ProfileSettings user={user}/>) else return ""