React类组件转函数组件时Props传递异常、查询参数无法正确接收

• 首先解决组件重名冲突问题
  你项目引入的react-bootstrap库本身内置Form组件，你自定义的表单组件也使用了Form作为导入名，大概率是出现了导入覆盖，导致你传入的自定义props被第三方组件接收后封装成了对象值，没有正确传递到你自己开发的表单组件中。
  修复方法：
  修改自定义表单组件的导入名，避免和第三方组件重名：

// 把首页原导入语句
import Form from "../components/Form";
// 修改为
import CustomForm from "../components/Form";

调用处对应修改：

<CustomForm
  handleInputChange={handleInputChange}
  handleFormSubmit={handleFormSubmit}
  q={q}
/>

• 其次修复**getBooks方法逻辑时序问题**
  你当前的setMessage是在调用API后同步执行的，不管API请求是否成功、返回结果是否为空都会直接修改提示文本，不符合预期逻辑，调整如下：

let getBooks = () => {
  API.getBooks(q)
    .then((res) => {
      setBooks(res.data)
      if(res.data.length === 0) {
        setMessage("No New Books Found, Try a Different Query")
      }
    })
    .catch(() => {
      setBooks([])
      setMessage("No New Books Found, Try a Different Query")
    });
};

• 最后修正属性名大小写拼写错误
  你给Book组件传link属性时写的是book.volumeInfo.infolink，但保存接口里用的是book.volumeInfo.infoLink（首字母L大写），大小写不一致会导致取值为空，需要统一拼写。

你可以在自定义表单组件开头打印props，确认接收的参数是否符合预期：

function Formmy({q, handleInputChange, handleFormSubmit }) {
  console.log('表单组件接收到的props：', {q, handleInputChange, handleFormSubmit})
  // 原有业务代码
}

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