在 onClick 中使用三元分配 apollo 突变？

Question

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

这是一个准系统示例，returns 类型分配错误，因为三元中的值不与 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>
    </>
)

}

Answer 1

如您所猜，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>

在 onClick 中使用三元分配 apollo 突变？

Assigning apollo mutations with a ternary in an onClick?

typescript

reactjs

tsx

apollo-client

react-hooks