Question

我有一个名为ProfileSettingsContainer的TrackerReact容器，它将Meteor.user()返回给user()函数并将其传递给ProfileSettings组件。我的最终目标是为用户的个人资料创建“设置”页面，用户可以在其中更改其头像并更新其他信息。这是我的代码。

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并且可以确认user.profile.avatar存在。我在Accounts.createUser()组件的signup函数中指定了默认图像“/user-default.svg”。

Answer 1

用户尚未加载（已定义），因此只需添加类似if (user) return(<ProfileSettings user={user}/>) else return ""

的smth

TrackerReact Container - 用户有profile.avatar设置，但控制台说它未定义

1 个答案: