为什么“handleAdd”方法中的“addTodo”给我“方法表达式不是函数类型”?
import React, {useState} from 'react';
import useAddTodo from "../../hooks/todos/useAddTodo";
function Home() {
const [value, setValue] = useState('');
const addTodo = useAddTodo();
const handleChange = e => {
setValue(e.target.value)
};
const handleAdd = e => {
e.preventDefault();
const todo = {
title: value,
status: false,
};
addTodo({
variables: todo,
})
};
return (
<form onSubmit={handleAdd}>
<input onChange={handleChange} value={value} type="text" placeholder="todo title"/>
<input onClick={handleAdd} type="submit" value="add"/>
</form>
);
}
export default Home;
这是我的钩子(Hook)
import {useMutation} from 'react-apollo-hooks'
import AddTodoMutation from "./graphql/mutations/AddTodoMutation";
function useAddTodo() {
return useMutation(AddTodoMutation);
}
export default useAddTodo
和我的突变
import gql from 'graphql-tag'
export const AddTodoMutation = gql`
mutation AddTodoMutation($title: String! $status: Boolean!) {
addTodo(title: $title status: $status) {
_id
title
status
}
}
`
export default AddTodoMutation
你们能向我解释一下问题所在吗?我将不胜感激!
最佳答案
根据文档,useMutation
返回一个数组(不是单个值)。
例如:
const [addTodo, { data }] = useMutation(ADD_TODO);
但是,您似乎正在返回并调用整个数组值。
要继续按原样使用自定义 Hook ,请尝试按如下方式更新它:
import {useMutation} from 'react-apollo-hooks'
import AddTodoMutation from "./graphql/mutations/AddTodoMutation";
function useAddTodo() {
// Destructure the addTodo mutation
const [addTodo] = useMutation(AddTodoMutation);
// Return the value to continue using it as is in the other files
return addTodo;
}
export default useAddTodo
关于reactjs - React-apollo-hooks useMutation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58089635/