Форма реагирования - как обращаться?Meteor.users.update w / React

Question

Бороться здесь ..

У меня есть стек Meteor, GraphQL, Apollo и React.

---

Проблема:

Отображение текущих значений профиля пользователя в полях ввода и обновление профиля пользователя.

---

Выпуск:

1 - При использовании контролируемых полей ввода документ Meteor.user стирается и остается только поля, которые были изменены.

2 - При неконтролируемых полях ввода появляется следующая ошибка:

Предупреждение: компонентам функции без сохранения состояния не могут быть предоставлены ссылки. попытки получить доступ к этой ссылке не удастся.

---

PS. - Я предполагаю, что выдается предупреждение с неконтролируемыми полями ввода, потому что оно находится внутри тега <Query /> с помощью «act-apollo », но как мне справиться с этим? Или как я все еще могу использовать контролируемые поля ввода?

Как вы, ребята, справились бы с этим?

Заранее большое спасибо!

Фрагменты кода:

1 - контролируемые поля ввода

import React, { Component } from "react";
import { Query } from "react-apollo";
..
import { GET_USER_PROFILE } from "../../../api/queries/Users";

class EditProfileForm extends Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  state = {
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    about: "",
    role: "student"
  };

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <Query query={GET_USER_PROFILE}>
        {({ data, loading, error, client }) => {
          if (loading) return <MainLoader />;
          if (error) return <ErrorMessage error={error} />;

          const { user } = data;
          const { email } = data.user;
          const { firstName, lastName, phone, about } = user.profile;
          const userId = user._id;

          const handleSubmit = () => {
            // TODO: Remove spaces, if user adds space to any of the fields, except About
            Meteor.users.update(userId, {
              $set: {
                email: this.state.email,
                profile: {
                  firstName: this.state.firstName,
                  lastName: this.state.lastName,
                  role: this.state.role,
                  phone: this.state.phone,
                  about: this.state.about
                }
              }
            });
            client.resetStore();
          };
          return (
            <div>
              <Form>
                <Form.Group widths="equal">
                  <Form.Input
                    fluid
                    label="First name"
                    name="firstName"
                    placeholder={firstName}
                    value={this.state.firstName}
                    onChange={this.handleInputChange}
                  />
                  <Form.Input
                    fluid
                    label="Last name"
                    placeholder={lastName}
                    name="lastName"
                    value={this.state.lastName}
                    onChange={this.handleInputChange}
                  />
                </Form.Group>
                <Form.Input
                  fluid
                  label="Email Address"
                  name="email"
                  placeholder={email}
                  type="email"
                  value={this.state.email}
                  onChange={this.handleInputChange}
                />
                <Form.Input
                  fluid
                  label="Phone Number"
                  name="phone"
                  placeholder={phone}
                  type="phone"
                  value={this.state.phone}
                  onChange={this.handleInputChange}
                />
                <Form.TextArea
                  label="About"
                  name="about"
                  placeholder={about}
                  value={this.state.about}
                  onChange={this.handleInputChange}
                />

                <Button onClick={handleSubmit} fluid color="blue" type="submit">
                  Save Changes
                </Button>
              </Form>
            </div>
          );
        }}
      </Query>
    );
  }
}

export default EditProfileForm;

2 - Неконтролируемые поля ввода

import React, { Component } from "react";
import { Query } from "react-apollo";
..
import { GET_USER_PROFILE } from "../../../api/queries/Users";
..

class EditProfileForm extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Query query={GET_USER_PROFILE}>
        {({ data, loading, error, client }) => {
          if (loading) return <MainLoader />;
          if (error) return <ErrorMessage error={error} />;

          const { user } = data;
          const { email } = data.user;
          const { firstName, lastName, phone, about } = user.profile;
          const userId = user._id;

          const handleSubmit = () => {
            const firstName = this.firstName.value;
            const lastName = this.lastName.value;
            const email = this.email.value;
            const phone = this.phone.value;
            const about = this.about.value;

            Meteor.users.update(userId, {
              $set: {
                email: email,
                profile: {
                  firstName: firstName,
                  lastName: lastName,
                  phone: phone,
                  about: about
                }
              }
            });
            client.resetStore();
          };
          return (
            <div>
              <Form>
                <Form.Group widths="equal">
                  <Form.Input
                    fluid
                    label="First name"
                    name="firstName"
                    defaultValue={firstName}
                    ref={input => (this.name = input)}
                  />
                  <Form.Input
                    fluid
                    label="Last name"
                    name="lastName"
                    defaultValue={lastName}
                    ref={input => (this.name = input)}
                  />
                </Form.Group>
                <Form.Input
                  fluid
                  label="Email Address"
                  name="email"
                  type="email"
                  defaultValue={email}
                  ref={input => (this.name = input)}
                />
                <Form.Input
                  fluid
                  label="Phone Number"
                  name="phone"
                  type="phone"
                  defaultValue={phone}
                  ref={input => (this.name = input)}
                />
                <Form.TextArea
                  label="About"
                  name="about"
                  defaultValue={about}
                  ref={input => (this.name = input)}
                />

                <Button onClick={handleSubmit} fluid color="blue" type="submit">
                  Save Changes
                </Button>
              </Form>
            </div>
          );
        }}
      </Query>
    );
  }
}

export default EditProfileForm;