React Hook 在函数“onSubmit”中调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数

Question

我有一个表单，我想在function onSubmit() 内的组件AddList() 中调用一个钩子function usePostAddList()。基本上usePostAddList() 是发出POST 请求。

这是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
}

我已经阅读了很多解决方案，例如我必须在函数名称中写“use”，将函数AddList大写，但仍然出现此错误：

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

但如果我像下面的代码一样调用usePostAddList()，它会起作用：

AddList.jsx

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

   return (
      ...
   )
}

但这并没有解决我的问题

Answer 1

您只能在功能组件内部和组件顶部使用挂钩。请查看rules of hooks 了解有关原因的更多信息。

您可以按如下方式使用自定义挂钩：

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

 return (
  ...
 )
}

并在 onSubmit 函数中更新您的数据：

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

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

 // Call set data
 setData(data)
}