小编Bri*_*ney的帖子

我正在尝试使用从 usestate 挂钩接收到的地图显示信息数组。在编写 map 函数时，我收到“无法调用类型缺少调用签名的表达式”的消息。错误。如果我创建一个返回相同信息的函数并调用该函数，则不会出现错误。

    export default function Portfolio() {
      const [portfolioData, setPortfoloioData] = useState<IProject[] | []>([])

      useEffect(() => {
        const portfolio: IProject[] = getPortfolio()
        setPortfoloioData(portfolio)
      }, [])

//Function to display the map that works.
      const displayBlocks = (portfolioData: IProject[]): JSX.Element[] => {
        return portfolioData.map((item, index) =>
          <ProjectBlock key={index} project={item} index={index} />
        )
      }

      return (
        <div className='text-center pt-3'>
          <h1 className='pb-4'>Portfolio</h1>

//This works without error
          {displayBlocks(portfolioData)} 

//This shows the missing call signature error even though
//it is the same as …

我试图useMutation以尽可能最好的方式实现并保持某种干净代码的感觉，但我在如何最好地管理复杂的调用方面遇到了麻烦。

例如，当一个人在我的应用程序上创建帐户时，需要发生以下几件事：

1. 服务器调用来验证 recapcha 分数
2. 服务器调用以创建用户并返回登录令牌和验证码，这些令牌和验证码将发送给用户以验证其帐户
3. 服务器调用发送验证码，然后存储登录cookie并重定向到下一页。

也许最好的解决方案是尝试在后端的一次调用中完成所有这些工作，如果这是最好的方法，我愿意这样做，但这感觉就像将太多的东西混合到后端的自定义路由中。

假设我希望它们都是单独的呼叫，当用户单击注册按钮时发生，那么管理这些呼叫的最佳方法是什么？

我一直在使用onSuccessuseMutation 的回调并调用该部分链中的下一个调用，但感觉非常臃肿。再说一次，如果这是最好的方法，我很高兴，但我很想听到关于更好方法的建议。

这是我制作onSuccess版本的方法：

const doSendVerification = useMutation((email)=>sendVerification(email), 
  {
    onSuccess: (data)=>{
        storeCookie(data)
        redirect('nextPath')
      }, 
    onError: (err)=>{handleError(err}
  })

const doCreateUser = useMutation((user)=>createUser(user), 
  {
    onSuccess: (data)=>{doSendVerification.mutate(data)}, 
    onError: (err)=>{handleError(err}
  })

const doVerifyRecaptcha = useMutation((token)=>verifyRecaptcha(token), 
  {
    onSuccess: (data)=>{doCreateUser.mutate(data)}, 
    onError: (err)=>{handleError(err}
  })

或者，我可以将它们全部放在一个函数中并使用 mutateAsync。我知道在下面的情况下，不会包含 onSuccess 回调。像这样的东西：

const handleSubmit = async ()=> {
  try {
    const verified = await doVerifyRecaptcha.mutateAsync(token)
    const newUser = await doCreateUser.mutateAsync(userInfo)
    const sendEmail = await doSendVerification.mutateAsync(emailInfo)
    storeLoginCookie(newUser)
    redirect('nextPath') …