React类组件转函数组件时setQ未被handleFormSubmit读取问题咨询

你的转换代码存在3处核心错误，对应你遇到的两个问题，逐一修复即可： #

错误1：handleInputChange 状态更新逻辑错误 #

这是导致你输入框显示[object Object]、提交时读不到正确查询参数的根本原因：
类组件中所有状态都存储在同一个state对象内，所以可以用[name]动态键赋值；但你转函数组件后q是单独声明的字符串类型状态，你写的setQ(([name] = value))是非法的赋值逻辑，如果你尝试模仿类组件写法给setQ传入{[name]: value}对象，会直接把q从字符串改为对象，输入框的value属性接收对象时会默认调用toString()方法，就会显示[object Object]。
修复后的代码：

const handleInputChange = (event) => {
  const { value } = event.target;
  // 直接把输入值赋值给q即可，不需要动态键
  setQ(value);
};

如果你的Form组件可能有多个输入框，要复用handleInputChange，也可以把多个输入相关的状态合并为一个对象：

// 声明状态时合并为对象
const [formData, setFormData] = useState({q: ''});
const handleInputChange = (event) => {
  const { name, value } = event.target;
  setFormData(prev => ({...prev, [name]: value}));
};
// 传值给Form组件时用formData.q

错误2：getBooks 错误提示逻辑错误 #

原类组件中只有接口请求失败时才会展示错误提示，你现在的写法是调用getBooks就同步设置错误提示，无论请求成功失败都会显示错误信息。
修复后的代码：

const getBooks = () => {
  API.getBooks(q)
    .then((res) => setBooks(res.data))
    .catch(() => {
      setBooks([]);
      // 只有请求失败时才设置错误提示
      setMessage("No New Books Found, Try a Different Query");
    });
};

错误3：Book组件参数大小写错误 #

原类组件中传的link参数是book.volumeInfo.infoLink，你写的小写infolink和接口返回字段不匹配，会导致链接取值为undefined。
修复后的代码：

<Book
  key={book.id}
  title={book.volumeInfo.title}
  subtitle={book.volumeInfo.subtitle}
  // 改回正确的大小写
  link={book.volumeInfo.infoLink}
  authors={book.volumeInfo.authors.join(", ")}
  description={book.volumeInfo.description}
  image={book.volumeInfo.imageLinks.thumbnail}
  Btn={() => (
    <Button
      onClick={() => handleBookSave(book.id)}
      variant="primary"
      className="ml-2"
    >
      Save
    </Button>
  )}
/>

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