在 onClick 中使用三元分配阿波罗突变？

问题描述

我是打字稿的新手，正在迁移 React 前端来学习。我目前在使用登录/注册组件时遇到问题 - 三元运算符被分配给 onClick 处理程序，该处理程序指示是否执行登录或注册突变。我实施了一种解决方法，将突变包装在函数中，但它看起来很脏。

这是一个准系统示例，它返回类型分配错误，因为三元组中的值不与 onClick 处理程序共享属性。如有必要，我可以提供更强大、可重现的示例。

const Auth = () => {
const history = useHistory();
const [formState,setFormState] = useState({
    login: true,firstName: '',lastName: '',username: '',password: '',email: ''
});

const [loginMutation] = useMutation(LOGIN_MUTATION,{
    onCompleted: (response) => {
        //...
    }
});
const [signupMutation] = useMutation(SIGNUP_MUTATION,{
    variables: {
        //...
    },onCompleted: (response) => {
        // ...
    }
});

return (
    <>
        {!formState.login && (
            display extra inputs for registration form
        )}
        username and password fields

        <button onClick={formState.login ? login : signup}>
            {formstate.login ? login: signup}
        </button>
    </>
)

}

解决方法

正如您正确猜到的那样，onClick 具有签名 (e:MouseEvent<HTMLButtonElement,MouseEvent>) => void，而变异具有不同的签名（类似于 (options?: MutationFunctionOptions<T>) => Promise<Result>）。因此，当您说 onClick={login} 时，您实际上是在这样做：onClick={e => login(e)} 这是错误的。

修复它的一种方法是编写一个内联函数

<button onClick={() => formState.login ? login() : signup()}>
 {formstate.login ? login: signup}
</button>