Javascript TrackerResact容器-用户设置了profile.avatar，但控制台显示为'；没有定义

我有一个名为

ProfileSettingsContainer

的TrackerResact容器，它将

Meteor.user（）

返回给

user（）

函数，并将其传递给

ProfileSettings

组件。我的最终目标是为用户的个人资料创建一个设置页面，用户可以在其中更改他们的化身并更新其他信息。这是我的密码

profile\u settings\u 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} />
    );
  }
}

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

import React，{Component}来自'React'；
从“meteor/ultimatejs:tracker react”导入TrackerReact；
从“/profile_settings”导入ProfileSettings；
导出默认类配置文件设置Container扩展TrackerReact（组件）{
用户（）{
返回Meteor.user（）；
}
render（）{
让user=this.user；
返回(
);
}
}

profile_settings.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} />
    );
  }
}

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

import React，{Component}来自'React'；
从“反应路由器”导入{Link}；
导出默认类配置文件设置扩展组件{
建造师（道具）{
超级（道具）；
此.state={
化身：props.user.profile.avatar | |“../../../public/user default.svg”
}
}
组件willmount（）{
//我们在客户端和服务器上创建此规则
弹弓。文件限制（“化身”{
允许的文件类型：[“image/png”、“image/jpeg”、“image/gif”]，
最大尺寸：2*500*500
});
}
上传（）{
var userId=Meteor.user（）。\u id；
var metaContext={avatarId:userId}；
var uploader=newslingshot.Upload（“UsersAvatar”，metaContext）；
uploader.send（document.getElementById（'input'）.files[0]，函数（error，downloadUrl）{//如果愿意，可以使用refs
如果（错误）{
console.error（'error upload'，uploader.xhr.response）；
警报（错误）；
}
否则{
Meteor.users.update（Meteor.userId（），{$set:{“profile.avatar”：downloadUrl}）；
}
this.setState（{avatar:downloadUrl}）；
}.约束（这个）；
}
formSubmit（）{
让avatarUrl=this.state.avatar；
Meteor.users.update（{u id:Meteor.userId（）}{
$set:{'profile.avatar'：avatarUrl}
});
}
render（）{
返回(
设置
文件输入
图像最大限制：2MB，500x500。裁剪：200x200

更新配置文件
取消
保存更改
);
}
} 

下面是我在加载设置页面时遇到的控制台错误：

profile\u settings.js:11Uncaught TypeError:无法读取未定义的属性“avatar”

---

除此之外，我还检查了RoboMongo，可以确认user.profile.avatar存在。我在

注册
组件中的
Accounts.createUser（）
函数中分配了“/user default.svg”的默认图像。
用户可能还没有加载（定义），所以只需将smth-like
if（user）return（）else return”“
用户可能还没有加载（定义），所以只需将smth-like
if（user）return（）放进去else return”“
您是否尝试过使用任何工具（如Meteor Toys）来达到客户在minimongo中拥有的峰值？您是否尝试过使用任何工具（如Meteor Toys）来达到客户在minimongo中拥有的峰值？