Reactjs 从react应用程序执行应用程序时出现问题

我有上面两个变种来在我的数据库中添加数据。我正在捕获bookval和authorval变量中的突变所需的名称字段。这些变量分别传递给AddBook和AddAuthor函数

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      name
    }
  }
`;
const ADD_AUTHOR = gql`
  mutation AddAuthor($type: String!) {
    addAuthor(type: $type) {
      name
    }
  }
`;

下面是我在表单提交中调用的函数。但是我得到一个错误，钩子只能在函数组件内部调用

AddBook(bookval) {
    const [addBook, { data }] = useMutation(ADD_BOOK);
    addBook({ variables: { type: bookval } });
  };

  AddAuthor(authorval) {
    const [addAuthor, { data }] = useMutation(ADD_AUTHOR);
    addAuthor({ variables: { type: authorval } });
  };

书名

this.book=value}
占位符=“输入图书名称”/>


作者姓名

this.author=value}
占位符=“输入作者姓名”/>




捐赠

---

这是我的表格

你可以这样做

 <form>
                <p>Book Name</p> 
                <input 
                  type='text'
                  ref={ (value) => this.book = value}
                  placeholder="enter book's name"/> 
                  <br/>
                  <p>Author Name</p>
                <input 
                  type='text'
                  ref={ (value) => this.author = value}
                  placeholder="enter author's name"/>
                  <br/>
                  <br/>
                  <button onClick={this.getValues.bind(this)}>Donate</button>
              </form>

返回(
{（addBook，{data}）=>（
{（addAuthor，{data}）=>(
{
e、 预防默认值（）；
addBook（{变量：{类型：this.book.value}}）；
addAuthor（{变量：{类型：this.author.value}}）；
this.book.value=“”；
this.author.value=“”；
}}
>
{
this.book=节点；
}}
/>
{
this.author=节点；
}}
/>
添加项
)}
)}
);

@注：给出的代码仅供参考。我假设您需要从单个表单中添加这两个内容。如果您需要单独添加它们，您可以将代码拆分为两种形式和两个组件

---

如果有任何疑问，请发表评论。

从外观上看，我可以看出您使用的是'this.author'，因此您的组件是

类组件

，您只能在

功能组件

中使用钩子，您能在调用

AddAuthor

和

AddBook

的地方分享更多的代码吗？我们可能会提供帮助。我是否可以将其转换为函数组件？可以尝试在类组件中使用变异组件：是的，这取决于需求，两者都可以工作。如果可能，转换为功能组件。如果不能使用

变异组件

变异组件是否也能在两个输入字段中正常工作？（我是否只需要在突变组件中添加另一个输入字段？）这很好，我只想从我们导入的位置添加来自单一表单的两个输入？

import{mutation}来自“react apollo”

-请检查此链接[]我有两个名为books（id，name，authord）和author（id，name）的表。我想将输入值中的数据插入这些表中。你能给我指路吗。没问题

return (
  <Mutation mutation={ADD_BOOK}>
    {(addBook, { data }) => (        
      <Mutation mutation={ADD_AUTHOR}>
        {(addAuthor, { data }) => (
          <div>
            <form
              onSubmit={e => {
                e.preventDefault();
                addBook({ variables: { type: this.book.value } });
                addAuthor({ variables: { type: this.author.value } });
                this.book.value = "";
                this.author.value = "";
              }}
            >
              <input
                ref={node => {
                  this.book = node;
                }}
              />
              <input
                ref={node => {
                  this.author = node;
                }}
              />
              <button type="submit">Add Item</button>
            </form>
          </div>
        )}
      </Mutation>
    )}
  </Mutation>
);