功能组件不能提供参考。在React和Apollo / GraphQl中使用antd

Question

我正在尝试使用react，apollo和graphql从蚂蚁设计中实现一种形式。我已经测试过，看看我的信息是否使用成功完成的react表单提交并发布到另一个页面。当我尝试重构以与ant设计表单一起使用时，我的信息没有发布，并且出现此警告-警告：无法为功能组件提供引用。尝试访问此引用将失败。您是要使用React.forwardRef（）吗？检查Mutation的渲染方法。
我想对如何解决这个问题有所了解。

import React, {Component} from 'react'
import {Add_User} from '../gql/mutations'
import {Mutation} from 'react-apollo'
import { Form, Input, Button, Checkbox } from 'antd';



const layout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 8,
 },
};
const tailLayout = {
wrapperCol: {
offset: 8,
span: 8,
},
      };


  class Signup extends Component{
     render(){


  const onFinish = values => {
  console.log('Success:', values);
   };

  const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
  };
    let name, email;
    return(
      <Mutation mutation={Add_User} onCompleted={() => this.props.history.push('/')}>
          {(addUser, {loading, error}) => (
              <div>
                  Create new user
                <Form {...layout} initialValues={{remember: true,}}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed} onSubmit= {e=>{e.preventDefault(); 
                    addUser({variables: {name: name.value, email: email.value}})
                    name.value = ""
                    email.value = ""
                    }}>

                <Form.Item label="Name" name="name" ref={node => { name = node}} rules={[{
                    required: true, message: 'Please input your name!',},
                ]}>
                <Input />
                </Form.Item>

                <Form.Item label="Email" name="email" ref={node => { email = node}} rules=. 
            {[{
                required: true, message: 'Please input your email!',
                },
            ]}>
                <Input />
                </Form.Item>

                <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">Submit</Button>
                </Form.Item>



              </Form>

             {loading && <p>Loading...</p>}
             {error && <p>Error : Please try again </p>}
              </div>

          )}
      </Mutation>
    )
     }
     }

   export default Signup