react-apollo-hooks useMutation

时间:2019-09-25 00:24:40

标签: reactjs graphql apollo

为什么“ handleAdd”方法中的“ addTodo”使我“方法表达式不是函数类型”?

Param(
    [Parameter(Mandatory=$true)]
    [string]$server
)

$ieObject = New-Object -ComObject 'InternetExplorer.Application'

$ieObject.AddressBar = 0
$ieObject.StatusBar = 0
$ieObject.ToolBar = 0
$ieObject.MenuBar = 0

$ieObject.Navigate("$server")

$ieObject.Visible = 1

这是我的钩子

    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;

和我的突变

import {useMutation} from 'react-apollo-hooks'
import AddTodoMutation from "./graphql/mutations/AddTodoMutation";

function useAddTodo() {
    return useMutation(AddTodoMutation);
}

export default useAddTodo

你们能向我解释似乎是什么问题吗?我将不胜感激!

1 个答案:

答案 0 :(得分:1)

根据文档,useMutation返回一个数组(不是单个值)。

例如:

const [addTodo, { data }] = useMutation(ADD_TODO);

但是,您似乎正在返回并调用整个数组值。

要继续使用自定义钩子,请尝试按以下方式更新它:

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