无法使用打字稿将任何参数传递给反应查询中的变异函数

Question

我正在尝试使用react-query并向axios后端发送发布请求来注册用户，但是当我尝试通过单击按钮来触发参数突变时，我收到错误。

import React from 'react'
import { useMutation } from '@tanstack/react-query'
import axios from 'axios'
import { Button } from 'react-bootstrap'

const RegisterScreen = () => {
  const { data, error, isLoading, mutate } = useMutation((user) =>
    axios.post('/api/users', user)
  )

  const user = { name: 'john', email: 'john@example.com', password: '1234' }

  return (
    <div>
      <Button onClick={() => mutate(user)}>Register</Button>
    </div>
  )
}

export default RegisterScreen

错误信息：

ERROR in src/screens/RegisterScreen.tsx:15:37
[1] TS2345: Argument of type '{ name: string; email: string; password: string; }' is not assignable to parameter of type 'void'.
[1]     13 |   return (
[1]     14 |     <div>
[1]   > 15 |       <Button onClick={() => mutate(user)}>Register</Button>
[1]        |                                     ^^^^
[1]     16 |     </div>
[1]     17 |   )
[1]     18 | }

Answer 1

已解决：我必须在 mutate 函数中向用户参数添加类型：

const { data, error, isLoading, mutate } = useMutation(
    (user: { name: string; email: string; password: string }) =>
      axios.post('/api/users', user)
  )