尽管代码运行，但箭头功能组件内的钩子调用无效

Question

I'm learning react and am trying to get a simple pop-up to show whenever the Show Toast button is clicked using Toast . However, I'm receiving this error:

Error in /turbo_modules/react-dom@16.13.1/cjs/react-dom.development.js (12408:27)
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I'm assuming it's something simple although I'm not used to hooks. The error states that hooks can only be called inside the body of a functional component, so:

1. Where is technically the body of a functional component? I assume where I've put this comment: //body of functional component here
2. Why is this error also appearing in the JS console: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method
3. How can I get the pop-up to show? The console.log('click') shows in the console so I assume it's the succeeding toast code that's incorrect

Here is a stackblitz demo

And here is the code:

import React from "react";
import { useForm } from "react-hook-form";
import { useToast } from "@chakra-ui/core";

const App = () => {
  const { register, handleSubmit, watch, errors } = useForm();
  //const toast = useToast();
  const onSubmit = data => {
      console.log('data', data);
    };

  // body of functional component here?

  const toastTest = () => 
    {
      const toast = useToast();
      return (
      <button
        onClick={() =>
          {
            console.log('click');
            toast({
              title: "Account created.",
              description: "We've created your account for you.",
              status: "success",
              duration: 9000,
              isClosable: true,
            })
          }
        }
      >
        Show Toast
      </button>
    )
  };

  console.log(watch("example"));

  return (
    <>

    {toastTest()}

    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="example" defaultValue="test" ref={register} />
      
      <input name="exampleRequired" ref={register({ required: true })} />
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
    </>
  );
}

export default App

I've seen similar other posts from other users but cannot get this to work. Any beginner advice to hooks would be appreciated, thank you.

Answer 1

Technically you are violating the Rules of Hooks . You should move out useToast from the function's body called toastTest into the root of your function component.

See my suggested solution below:

const App = () => {
  const toast = useToast(); // useToast moved here from the function
  const { register, handleSubmit, watch, errors } = useForm();

  const onSubmit = data => {
      console.log('data', data);
  }

  const toastTest = () => 
     // please notice useToast is removed from here
     // ... rest of the function's body
  }

  return <> { /* your return */ }</>
}