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

Question

我有一个表单，我想function usePostAddList()在AddList(). function onSubmit()基本上就是usePostAddList()提出请求POST。

这是代码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)
}
..
..
}

减速器/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()下面的代码，它就会起作用：

添加列表.jsx

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

   return (
      ...
   )
}

但这并没有解决我的问题

Answer 1

您只能在功能组件内部和组件顶部使用钩子。检查钩子规则以获取有关原因的更多信息。

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

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)
}