Использование Meteor.user () в поле реактивной формы - PullRequest
Новая
       9

Использование Meteor.user () в поле реактивной формы

0 голосов
/ 29 июня 2018

Я пытаюсь настроить функцию «редактировать профиль» в Meteor + React. Само обновление работает нормально, но при загрузке страницы текущие данные не отображаются. Несколько вызовов console.log () показывают, что он изначально не определен, возможно, когда состояние установлено, и через мгновение корректно обновляется, но затем состояние уже установлено.

Для обычных подписок я бы использовал $ subReady - что я могу использовать для автоматически публикуемых пользовательских данных?

Вот мой код: 

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import { Card, Loader, Form } from 'semantic-ui-react';

// React component
class ProfileCard extends React.Component {
  state = { username: this.props.currentUser ? this.props.currentUser.username : '' }

  handleChange = (e, { name, value }) => this.setState({ [name]: value })

  handleSubmit = () => {
    const { username } = this.state
    Meteor.call('user.update', username);
  }

  render() {
    const { username } = this.state
    return (
      <Card fluid>
        { this.props.currentUser ? (
            <Card.Content>
              <Card.Header>Account Data</Card.Header>
              <Form onSubmit={this.handleSubmit}>
                  <Form.Input
                    label="Username"
                    name="username"
                    type="text"
                    placeholder="set user name"
                    value={username}
                    onChange={this.handleChange}
                  />

                  <Form.Button primary content="Submit" />
              </Form>
            </Card.Content>
        ) : (
            <Card.Content>
                <Loader />
            </Card.Content>
        )}
      </Card>
    );
  }
}

export default withTracker(props => {
  return {
    currentUser: Meteor.user(),
  };
})(ProfileCard);
...