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

React Hook 在函数 "onSubmit" 中调用，它既不是 React 函数组件也不是自定义 React Hook 函数

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

javascript

reactjs

use-reducer