"user.profile"はAccounts.createUser（）の宣言にもかかわらず未定義です

Question

私はログインしたユーザーがプロフィール画像を変更できる「設定」ページに取り組んでいます。しかし、メテオがuserのprofile属性を見つけるのが難しいようです。

signup.js（私はサインアップにユーザーを作成し、プロファイル属性を作成するのはここです）

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

export default class Signup extends Component { 
    handleSubmit(event) { 
    event.preventDefault(); 

    var signupEmail = event.target.signupEmail.value; 
    var signupPassword = event.target.signupPassword.value; 

    if (signupPassword !== '') { 
     Accounts.createUser({ 
     email: signupEmail, 
     password: signupPassword, 
     profile: { 
      avatar: "/user-default.svg" 
     } 
     }, (err) => { 
     err ? (console.log(err.reason)) : browserHistory.push("/app/profile"); 
     }); 
    } 
    } 

    render() { 
    return (
     <div className="login-form"> 
     <form onSubmit={this.handleSubmit}> 
      <div className="input-options"> 
      <input type="text" placeholder="Email" name="signupEmail" /> 
      </div> 

      <div className="input-options"> 
      <input type="password" placeholder="Password" name="signupPassword" /> 
      </div> 

      <button className="login-submit bold">Sign me up!</button> 
     </form> 
     </div> 
    ); 
    } 
} 

profile_settings.js

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 
import reactMixin from 'react-mixin'; 
import ReactMeteorData from 'meteor/react-meteor-data'; 

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

    this.state = { 
     avatar: this.props.user.profile.avatar 
    } 
    } 

    getMeteorData(){ 
    return{ 
     user: Meteor.user() 
    } 
    } 

    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) { 
     // Log service detailed response 
     console.error('Error uploading', uploader.xhr.response); 
     alert (error); // you may want to fancy this up when you're ready instead of a popup. 
     } 
     else { 
     // we use $set because the user can change their avatar so it overwrites the url :) 
     Meteor.users.update(Meteor.userId(), {$set: {"profile.avatar": downloadUrl}}); 
     } 
     // you will need this in the event the user hit the update button because it will remove the avatar url 
     this.setState({avatar: downloadUrl}); 
    }.bind(this)); 
    } 

    formSubmit(){ 
    let avatarUrl = this.state.avatar; 
    Meteor.users.update({_id: Meteor.userId() }, { 
     $set: {profile: 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> 
    ); 
    } 
} 

reactMixin(ProfileSettings.prototype, ReactMeteorData); 

ここで私は、エラーがあります取得中：TypeError: Cannot read property 'profile' of undefined

Answer 1

エラーが見つかりませんでしたprofile属性ですが、userはありません（またはuserは未定義です）。これはまさにTypeError: Cannot read property 'profile' of undefinedの意味です。

あなたのコード内のいくつかのエラーがあります

• がgetMeteorDataのリターンがthis.dataなくthis.props
• getMeteorDataの下で提供されていますので、コンストラクタで流星のデータを取得する方法はありませんconstructor後に実行されます
• getMeteorDataは反応的にデータを返し、クラスをインスタンス化するときに必要なデータを持たない可能性があります。

だから私は似ているコンテナ/コンポーネントのアプローチを使用してお勧めします：

export default class ProfileSettingsContainer extends Component { 
    getMeteorData(){ 
    return{ 
     user: Meteor.user() 
    } 
    } 
    render() { 
    const user = this.data.user; 
    if (user) { 
     return <ProfileSettings user={user} /> 
    } else { 
     return null; // or what ever placeholder you want while the data is being loaded 
    } 
    } 
} 


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

    this.state = { 
     avatar: props.user.profile.avatar 
    } 
    } 
} 

このような構造で、ProfileSettingsは、Finnaly

props.user下に何かを

Meteor.users.update({_id: Meteor.userId() }, { 
    $set: {profile: avatarUrl} 
}); 

をインスタンス化しますは、

Meteor.users.update({_id: Meteor.userId() }, { 
    $set: {'profile.avatar': avatarUrl} 
}); 

しかしそれは無関係です