使用查询组件React apollo设置状态

Question

我使用相同的表格来创建和更新帐户（模块）。创建工作正常，但是在更新模式下，我无法使用“设置状态”方法设置表单字段值。我在渲染方法上使用了查询组件，而setstate在rendor方法上不起作用。

import { Mutation } from "react-apollo";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import React, { Component } from "react";
import Router from "next/router";
import Joi from "joi-browser";

const CREATE_ACCOUNT = gql`
mutation CreateAccount(
$name: String
$phone_office: String
$website: String
 ) {
  createAccount(name: $name, phone_office: $phone_office, website: 
  $website) {
  name
  phone_office
  website
}
}
`;



 export const allAccountbyidQuery = gql`
    query account($id: String) {
     account(id: $id) {
      id
      name
      phone_office
      website
     }
     };
      const schema = {
  name: Joi.string()
    .required()
    .error(errors => {
      return {
        message: "Name is required!"
      };
    }),
  phone_office: Joi.string()
    .required()
    .error(errors => {
      return {
        message: "Phone Number is required!"
      };
    }),
  website: Joi.string()
    .required()
    .error(errors => {
      return {
        message: "Website is required!"
      };
    })
};

主类组件

class CreateAccountModule extends React.Component {
        static async getInitialProps({ query }) {
        const { id } = query;
        return { id };
    }
   constructor(props) {
    super();
    this.state = {
      isFirstRender: true,
      name: "",
      phone_office: "",
      website: ""
    };
   }

   handleChange = event => {
    console.log("hello");
    const { name, value } = event.target;
    this.setState({ [name]: value });

   };
validate(name, phone_office, website) {
let errors = "";
const result = Joi.validate(
  {
    name: name,
    phone_office: phone_office,
    website: website
  },
  schema
);
if (result.error) {
  errors = result.error.details[0].message;
}
return errors;
}
setName = name => {
    if (this.state.isFirstRender) {
      this.setState({ name, isFirstRender: false });
    }
  };

  render() {
    let input;
    const { errors } = this.state;
    console.log(this.props);

    const allAccountbyidQueryVars = {
      id: this.props.id
    };

    //console.log(allAccountbyidQueryVars);
    return (
      <Query
        query={allAccountbyidQuery}
        variables={allAccountbyidQueryVars}
        onCompleted={data => this.setName(data.account.name)}
      >
        {({ data, loading, error }) => {
          <CreateAccountModule account={data.account} />;

          return (
            <Mutation mutation={CREATE_ACCOUNT}>
              {(createAccount, { loading, error }) => (
                <div>
                  <form
                    onSubmit={e => {
                      e.preventDefault();
                      const errors = this.validate(
                        e.target.name.value,
                        e.target.phone_office.value,
                        e.target.website.value
                      );
                      if (errors) {
                        this.setState({ errors });
                        return;
                      }
                      if (!errors) {
                        let accountres = createAccount({
                          variables: {
                            name: e.target.name.value,
                            phone_office: e.target.phone_office.value,
                            website: e.target.website.value
                          }
                        }).then(() => Router.push("/"));
                        input.value = "";
                      }
                    }}
                  >
                    {errors && <p>{errors}</p>}
                    <input
                      type="text"
                      name="name"
                      id="name"
                      placeholder="Name"
                      value={this.state.name}
                      onChange={this.handleChange}
                    />
                    <input
                      name="phone_office"
                      id="phone_office"
                      placeholder="Phone Number"
                      //value={data.account.phone_office}
                      //value="123456"
                      onChange={this.handleChange}
                    />
                    <input
                      name="website"
                      id="website"
                      placeholder="Website"
                      //value={data.account.website}
                      onChange={this.handleChange}
                    />
                    <button type="submit">Add Account</button>
                    <button type="button">Cancel</button>
                  </form>
                  {loading && <p>Loading...</p>}
                  {error && <p>Error :( Please try again</p>}
                </div>
              )}
            </Mutation>
          );
        }}
      </Query>
    );
  }
}

export default CreateAccountModule;
`

我尝试过用道具，但以阿波罗状态获取道具数据。任何人请提出可能的解决方案来解决此问题。