React Hook is called in function "onSubmit" which is neither a React function component or a custom React Hook function

Question

I have a form, and I wanted to call a hooks function usePostAddList() in the component AddList() inside the function onSubmit(). basically the usePostAddList() is to make a POST request.

Here's the code for the AddList():

AddList.jsx

export default function AddList() {
..
..
const onSubmit = (e) => {
    e.preventDefault()

    const data = [
      {
        komoditas,
        areaKota,
        areaProvinsi,
        price,
        tglParsed,
      },
    ]

    // I called it here and it show an error
    usePostAddList(data)
}
..
..
}

Reducer/index.js

export function usePostAddList(data) {
  const [state, dispatch] = React.useReducer(reducer, initState)

  React.useEffect(() => {
    dispatch({ type: ACTIONS.MAKE_REQUEST })
    store
      .append("Sheet2", data)
      .then((res) =>
        dispatch({
          type: ACTIONS.ADD_LIST,
          payload: res,
        })
      )
      .catch((e) => {
        return dispatch({
          type: ACTIONS.GET_ERRORS,
          payload: e,
        })
      })
  }, [])

  return state
}

I have read many solutions like I must write "use" for the name of the function, capitalize the function AddList, but still got this error:

React Hook "usePostAddList" is called in function "onSubmit" which is neither a React function component or a custom React Hook function

but if I called the usePostAddList() like this code below somehow it worked :

AddList.jsx

export default function AddList() {
   const { lists, loading, errors } = usePostAddList("test")

   return (
      ...
   )
}

but it didn't solve my problem

What is the error? One of the rules of hooks is they have to be called at the top level of the component, so I suspect that's why `usePostAddList()` doesn't error in your second example but it does when it's nested inside of onSubmit. — EvanMorrison, Jul 26 '20 at 02:43
so what should I do? I can't call `useReducer` inside a function? — panji gemilang, Jul 26 '20 at 02:52
Just like in a component, make sure to only call other Hooks unconditionally at the top level of your custom Hook. Meaning you’re building your hook wrong, if you want to execute a function inside it, you need to return it and then use that function in the component using the hook, take a look at how useState works — ludwiguer, Jul 26 '20 at 03:40
Sorry, I’m on my phone rn, another solution is to store your data in a state variable and call your hook outside the submit function passing that variable, your hook will be called everytime your state variable is updated — ludwiguer, Jul 26 '20 at 03:56

score 6 · Accepted Answer · answered Jul 26 '20 at 06:27

6

You can only use hooks inside functional components and at the top of your component. Check rules of hooks for more information on why.

You can use your custom hook as follows:

export default function AddList() {
 const [data,setData] = useState()
 const { lists, loading, errors } = usePostAddList(data)

 return (
  ...
 )
}

And update your data at onSubmit function:

const onSubmit = (e) => {
 e.preventDefault()

 const data = [
  {
    komoditas,
    areaKota,
    areaProvinsi,
    price,
    tglParsed,
   },
 ]

 // Call set data
 setData(data)
}

answered Jul 26 '20 at 06:27

Çağatay Sel

801
7
14

this approach will call Post request for the first time. wasn't that unnecessary? – panji gemilang Jul 26 '20 at 06:34
You can add a undefined check to your post request to avoid sending request if the data is undefined. – Çağatay Sel Jul 26 '20 at 08:16

React Hook is called in function "onSubmit" which is neither a React function component or a custom React Hook function

1 Answers1