React Form-如何处理？带React的Meteor.users.update

Question

在这里挣扎..

我有一个Meteor，GraphQL，Apollo和React堆栈。

---

问题：

在输入字段中显示用户配置文件的当前值并更新用户配置文件。

---

问题：

1-使用“受控”输入字段，将清除Meteor.user文档，仅保留已更改的字段。

2-在输入字段不受控制的情况下，出现以下错误：

  

警告：无状态功能组件无法提供引用。尝试次数   访问此引用将失败。

---

PS。 -我猜是由于“ react-apollo”在<Query />标记内而引发了警告，输入字段不受控制，但是我该如何处理呢？还是我仍如何使用受控输入字段？

你们会如何处理？

非常感谢！

代码段：

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;