Arrays 如何将react表单值传递到变异（变量）中？

我有一张桌子和我的通讯录。我使用Apollo从GQL数据库获取数据。我使用这个例子（）并用我的数据修改了它。到目前为止，我可以看到条目并打开编辑/添加对话框，添加一个新条目，该条目的键为“testcreate27”，名称为Daniel

这就是我在PostEditor.js中使用的代码：

import React from 'react';
import gql from 'graphql-tag';
import {
  Button,
  Form,
  FormGroup,
  Label,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from 'reactstrap';
import { Form as FinalForm, Field } from 'react-final-form';

import client from '../../../../apollo';
import { GET_POSTS } from './PostViewer';




const SUBMIT_POST = gql`
mutation {
  createInteressent(parentId: 1250, key: "testcreate27", published: true, input: {Name: "Daniel"}) {
    success
    message
    output(defaultLanguage: "de") {
      id
    }
  }
}

`;



const PostEditor = ({ node, onClose }) => (
  <FinalForm
    onSubmit={async ({ id, Name, Vorname, Quelle, Artikel, Land, Ort, Tel, Mobil, EMail, Whatsapp, Telegram, Notizen, Geschlecht }) => {
      const input = { id, Name, Vorname, Quelle, Artikel, Land, Ort, Tel, Mobil, EMail, Whatsapp, Telegram, Notizen, Geschlecht };

      await client.mutate({
        variables: { input },
        mutation: SUBMIT_POST,
        refetchQueries: () => [{ query: GET_POSTS }],
      });

      onClose();
    }}
    initialValues={node}
    render={({ handleSubmit, pristine, invalid }) => (
      <Modal isOpen toggle={onClose}>
        <Form onSubmit={handleSubmit}>
          <ModalHeader toggle={onClose}>
           {node.id ? 'Edit Post' : 'New Post'}
          </ModalHeader>
          <ModalBody>
            <FormGroup>
              <Label>Name</Label>
              <Field
                required
                name="Name"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Vorname</Label>
              <Field
                required
                name="Vorname"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Quelle</Label>
              <Field
                required
                name="Quelle"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Artikel</Label>
              <Field
                required
                name="Artikel"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Land</Label>
              <Field
                required
                name="Land"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Ort</Label>
              <Field
                required
                name="Ort"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Tel</Label>
              <Field
                required
                name="Tel"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Mobil</Label>
              <Field
                required
                name="Mobil"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>EMail</Label>
              <Field
                required
                name="EMail"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Whatsapp</Label>
              <Field
                required
                name="Whatsapp"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Telegram</Label>
              <Field
                required
                name="Telegram"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Notizen</Label>
              <Field
                required
                name="Notizen"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Geschlecht</Label>
              <Field
                required
                name="Geschlecht"
                className="form-control"
                component="input"
              />
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button type="submit" disabled={pristine} color="primary">Save</Button>
            <Button color="secondary" onClick={onClose}>Cancel</Button>
          </ModalFooter>
        </Form>
      </Modal>
    )}
  />
);

export default PostEditor;

从“React”导入React；
从“graphql标签”导入gql；
进口{
按钮
形式，
FormGroup，
标签，
情态动词
莫达尔海德，
ModalBody，
莫达沃特，
}来自“反应带”；
从“react final Form”导入{Form as FinalForm，Field}；
从“../../../../apollo”导入客户端；
从“/PostViewer”导入{GET_POSTS}；
const SUBMIT_POST=gql`
突变{
CreateInterestSent（父ID:1250，键：“testcreate27”，发布：true，输入：{Name:“Daniel”}）{
成功
消息
输出（默认语言：“de”）{
身份证件
}
}
}
`;
常量PostEditor=（{node，onClose}）=>(
{
const input={id，Name，Vorname，Quelle，Artikel，Land，Ort，Tel，Mobil，EMail，Whatsapp，telegate，Notizen，Geschlecht}；
等待客户({
变量：{input}，
突变：提交后，
refetchQueries:（）=>[{query:GET_POSTS}]，
});
onClose（）；
}}
初始值={node}
render={（{handleSubmit，原始，无效}）=>(
{node.id？'Edit Post'：'New Post'}
名称
沃名称
奎尔
冠词
土地
奥特
电话
美孚石油
电子邮件
WhatsApp
电报
诺蒂森
石膏
拯救
取消
)}
/>
);
导出默认PostEditor；

现在我有两个问题无法解决

1：我想让我在输入表单中写的变量在gql变异中，而不是“Input:{Name:“Daniel”}”，我想让键是Vorname+Nachname（英文=firstname+Name），而不是“testcreate27”

到目前为止，我尝试的是：

1：尝试我知道的每个方法将变量写入该字段。->主要是关于意外的错误。}，等等。。。。。或错误，应为类型字符串

尝试将SUBMIT_POST分为两部分，并将我的变量置于其中。->语法错误

编辑：

这是我的工作查询的代码：

import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import { Table } from 'reactstrap';

export const GET_POSTS = gql`
query   {
  getInteressentListing {
    edges {
      node {
        id
        Name
        Vorname
        Quelle
        Artikel
        Land
        Ort
        Tel
        Mobil
        EMail
        Whatsapp
        Telegram
        Notizen
        Geschlecht
      }
    }
  }
}
`;


const rowStyles = (post, canEdit) => canEdit(post)
  ? { cursor: 'pointer', fontWeight: 'bold' }
  : {};

const PostViewer = ({ canEdit, onEdit }) => (
  <Query query={GET_POSTS}>
    {({ loading, data }) => !loading && (
      <Table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Vorname</th>
            <th>Quelle</th>
            <th>Artikel</th>
            <th>Land</th>
            <th>Ort</th>
            <th>Tel.</th>
            <th>Mobil</th>
            <th>E-Mail</th>
            <th>Whatsapp</th>
            <th>Telegram</th>
            <th>Notizen</th>
            <th>Geschlecht</th>
          </tr>
        </thead>
        <tbody>
          {data.getInteressentListing.edges.map(({node}) => (
            <tr
              key={node.id}
              style={rowStyles(node, canEdit)}
              onClick={() => canEdit(node) && onEdit(node)}
            >
    <td> {node.Name} </td>
    <td> {node.Vorname} </td>
    <td> {node.Quelle} </td>
    <td> {node.Artikel} </td>
    <td> {node.Land} </td>
    <td> {node.Ort} </td>
    <td> {node.Tel} </td>
    <td> {node.Mobil} </td>
    <td> {node.EMail} </td>
    <td> {node.Whatsapp} </td>
    <td> {node.Telegram} </td>
    <td> {node.Notizen} </td>
    <td> {node.Geschlecht} </td>
             
            </tr>
          ))}
        </tbody>
      </Table>
    )}
  </Query>
);
PostViewer.defaultProps = {
  canEdit: () => true,
  onEdit: () => null,
};

export default PostViewer;

从“React”导入React；
从“graphql标签”导入gql；
从'react apollo'导入{Query}；
从“reactstrap”导入{Table}；
导出常量GET_POSTS=gql`
质疑{
获取兴趣列表{
边缘{
节点{
身份证件
名称
沃名称
奎尔
冠词
土地
奥特
电话
美孚石油
电子邮件
WhatsApp
电报
诺蒂森
石膏
}
}
}
}
`;
常量行样式=（post，canEdit）=>canEdit（post）
? {cursor:'pointer'，fontwweight:'bold'}
: {};
const PostViewer=（{canEdit，onEdit}）=>(
{（{加载，数据}）=>！加载&&(
名称
沃名称
奎尔
冠词
土地
奥特
电话。
美孚石油
电子邮件
WhatsApp
电报
诺蒂森
石膏
{data.getInterestSentListing.edges.map（{node}）=>(
canEdit（节点）&&OneEdit（节点）}
>
{node.Name}
{node.Vorname}
{node.Quelle}
{node.Artikel}
{node.Land}
{node.Ort}
{node.Tel}
{node.Mobil}
{node.EMail}
{node.Whatsapp}
{节点电报}
{node.Notizen}
{node.Geschlecht}
))}
)}
);
PostViewer.defaultProps={
canEdit:（）=>正确，
OneEdit:（）=>null，
};
导出默认PostViewer；

因此，对我来说最有效的方法是：

import React from 'react';
import gql from 'graphql-tag';
import { useMutation } from '@apollo/client';
import {
  Button,
  Form,
  FormGroup,
  Label,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from 'reactstrap';
import { Form as FinalForm, Field } from 'react-final-form';

import client from '../../../../apollo';
import { GET_POSTS } from './PostViewer';




const SUBMIT_POST = gql`
mutation (
$key: String!, 
$Namegql: String!,
$Vornamegql: String!,
$Quellegql: String,
$Artikelgql: String,
$Landgql: String,
$Ortgql: String,
$telgql: String,
$Mobilgql: String,
$EMailgql: String,
$Whatsappgql: Boolean,
$Telegramgql: Boolean,
$Notizengql: String,
$Geschlechtgql: String,
){
  createInteressent(parentId: 1266, key: $key, published: true, input: {
Name: $Namegql,
Vorname: $Vornamegql,
Quelle: $Quellegql,
Artikel: $Artikelgql,
Land: $Landgql,
Ort: $Ortgql,
Tel: $telgql,
Mobil: $Mobilgql,
EMail: $EMailgql,
Whatsapp: $Whatsappgql,
Telegram: $Telegramgql,
Notizen: $Notizengql,
Geschlecht: $Geschlechtgql,
}) {
    success
    message
    output(defaultLanguage: "de") {
      id
    }
  }
}
`;




const PostEditor = ({ node, onClose }) => (
  <FinalForm
    onSubmit={async ({ id, Name, Vorname, Quelle, Artikel, Land, Ort, Tel, Mobil, EMail, Whatsapp, Telegram, Notizen, Geschlecht }) => {
      const input = { id, Name, Vorname, Quelle, Artikel, Land, Ort, Tel, Mobil, EMail, Whatsapp, Telegram, Notizen, Geschlecht };
    const key = Vorname + Name;
    const Namegql = Name;
    const Vornamegql = Vorname;
    const Quellegql = Quelle;
    const Artikelgql = Artikel;
    const Landgql = Land;
    const Ortgql = Ort;
    const Telgql = Tel;
    const Mobilgql = Mobil;
    const EMailgql = EMail;
    const Whatsappgql = Whatsapp;
    const Telegramgql = Telegram;
    const Notizengql = Notizen;
    const Geschlechtgql = Geschlecht;
        await client.mutate({
        variables: { 
input, 
key, 
Namegql, 
Vornamegql, 
Quellegql, 
Artikelgql, 
Landgql, 
Ortgql, 
Telgql, 
Mobilgql, 
EMailgql, 
Whatsappgql, 
Telegramgql, 
Notizengql, 
Geschlechtgql
},
        mutation: SUBMIT_POST,
        refetchQueries: () => [{ query: GET_POSTS }],
});

      onClose();
    }}
    initialValues={node}
    render={({ handleSubmit, pristine, invalid }) => (
      <Modal isOpen toggle={onClose}>
        <Form onSubmit={handleSubmit}>
          <ModalHeader toggle={onClose}>
           {node.id ? 'Edit Post' : 'New Post'}
          </ModalHeader>
          <ModalBody>
            <FormGroup>
              <Label>Name</Label>
              <Field
                required
                name="Name"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Vorname</Label>
              <Field
                required
                name="Vorname"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Quelle</Label>
              <Field

                name="Quelle"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Artikel</Label>
              <Field
                
                name="Artikel"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Land</Label>
              <Field
   
                name="Land"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Ort</Label>
              <Field

                name="Ort"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Tel</Label>
              <Field
          
                name="Tel"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Mobil</Label>
              <Field
             
                name="Mobil"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>EMail</Label>
              <Field

                name="EMail"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Whatsapp</Label>
              <Field
         
                name="Whatsapp"
                className="form-control"
                component="input"
        type="checkbox"
              />
            </FormGroup>
            <FormGroup>
              <Label>Telegram</Label>
              <Field
         
                name="Telegram"
                className="form-control"
                component="input"
        type="checkbox"
              />
            </FormGroup>
            <FormGroup>
              <Label>Notizen</Label>
              <Field
        
                name="Notizen"
                className="form-control"
                component="textarea"
              />
            </FormGroup>
            <FormGroup>
              <Label>Geschlecht</Label>
              <div>
              <label>
                <Field
                  name="Geschlecht"
                  component="input"
                  type="radio"
                  value="Männlich"
                />{' '}
                Männlich
              </label>
              <label>
                <Field
                  name="Geschlecht"
                  component="input"
                  type="radio"
                  value="Weiblich"
                />{' '}
                Weiblich
              </label>
              <label>
                <Field
                  name="Geschlecht"
                  component="input"
                  type="radio"
                  value="Divers"
                />{' '}
                Divers
              </label>
            </div>
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button type="submit" disabled={pristine} color="primary">Save</Button>
            <Button color="secondary" onClick={onClose}>Cancel</Button>
          </ModalFooter>
        </Form>
      </Modal>
    )}
  />
);

export default PostEditor;

从“React”导入React；
从“graphql标签”导入gql；
从'@apollo/client'导入{usespation}；
进口{
按钮
形式，
FormGroup，
标签，
情态动词
莫达尔海德，
ModalBody，
莫达沃特，
}来自“反应带”；
从“react final Form”导入{Form as FinalForm，Field}；
从“../../../../apollo”导入客户端；
从“/PostViewer”导入{GET_POSTS}；
const SUBMIT_POST=gql`
突变(
$key:String！，
$Namegql:String！，
$Vornamegql:String！，
$Quellegql:String，
$Artikelgql:String，
$Landgql:字符串，
$Ortgql:字符串，
$telgql:String，
$Mobilgql:String，
$EMailgql:String，
$Whatsappgql:Boolean，
$gql:Boolean，
$Notizengql:String，
$Geschlechtgql:String，
){
CreateInterestSent（parentId:1266，key:$key，published:true，输入：{
名称：$Namegql，
Vorname:$Vornamegql，
Quelle:$Quellegql，
Artikel:$Artikelgql，
土地：$Landgql，
Ort:$Ortgql，
电话：$telgql，
美孚：$Mobilgql，
电子邮件：$EMailgql，
Whatsapp:$Whatsappgql，
电报：$Telegramgql，
Notizen:$Notizengql，
Geschlecht:$Geschlechtgql，
}) {
成功
消息
输出（默认语言：“de”）{
身份证件
}
}
}
`;
常量PostEditor=（{node，onClose}）=>(
{
const input={id，Name，Vorname，Quelle，Artikel，Land，Ort，Tel，Mobil，EMail，Whatsapp，telegate，Notizen，Geschlecht}；
const key=Vorname+Name；
const Namegql=名称；
const Vornamegql=Vorname；
康斯特奎莱格