React调用useForm出现Object非函数或返回值不可迭代报错如何解决

错误根因 #

React官方没有内置useForm这个Hook，你从react包中导入useForm的操作是错误的，导入后的useForm实际为undefined，调用undefined并尝试对其返回值做数组解构就会触发你遇到的类型报错。同时你导入的response也不是react的原生导出项，属于无效导入。

修复步骤 #

• 先删除react导入语句中的无效项，修改导入为：

  import { useState, useEffect } from 'react';
  

• 给你的input标签添加name属性，和你初始化的字段名对应：

  <input name="bookName" value={values.bookName} onChange={handleChange} type="text" />
  

• 选择以下任意一种方式获取可用的useForm：

方案1：自定义useForm Hook（无需额外安装依赖） #

直接在你的Books组件上方定义自定义Hook即可：

const useForm = (initialValues) => {
  const [values, setValues] = useState(initialValues);
  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues(prev => ({ ...prev, [name]: value }));
  };
  return [values, handleChange];
};

方案2：使用第三方react-hook-form库 #

如果你是想使用成熟的表单库功能，先安装依赖：
npm install react-hook-form
再修改对应代码适配库的用法：

// 修改导入
import { useForm } from 'react-hook-form';

// 组件内用法调整
const { register, handleSubmit } = useForm({
  defaultValues: {
    bookName: ''
  }
});

// input标签改为
<input {...register("bookName")} type="text" />

内容的提问来源于stack exchange，提问作者Mikael