React搜索图书组件报错：Invalid hook call及useState读取null属性问题

你遇到的这两个错误通常和React Hook调用规则冲突、React环境配置问题有关，你的SearchBooks组件代码本身的Hook使用是符合规范的，以下是常见排查和解决方法：

1. 排查重复的React实例 #

项目中如果存在多个React版本或重复安装的React包，会导致Hook调用失败：

• 执行命令查看依赖树：

  npm ls react react-dom
  

• 如果输出中出现多个react或react-dom条目，说明存在重复依赖：
  • 删除node_modules和锁文件：

    rm -rf node_modules package-lock.json
    

  • 重新安装依赖：

    npm install
    

2. 确保所有Hook都在函数组件顶层调用 #

虽然你的SearchBooks组件中useState都在组件最外层，但要检查其他导入的组件（Header、AboutInfo等）是否存在以下错误：

• 在条件判断、循环语句中调用Hook
• 在嵌套函数（比如事件处理函数内部）中调用Hook
• 在类组件中使用Hook（类组件不支持Hook，需改为函数组件）

3. 检查React版本与导入方式 #

• 确认你的React版本≥16.8（Hook的最低支持版本），可以通过以下命令查看：

  npm list react
  

• 如果版本过低，升级到最新稳定版：

  npm install react@latest react-dom@latest
  

• 确保导入方式正确，避免混用ES模块和CommonJS语法：

  // 正确的ES模块导入
  import React, { useState } from "react"
  

4. 排查Babel或构建工具配置问题 #

• 如果使用了自定义Babel配置，确保@babel/preset-react已正确配置，且没有冲突的插件（比如过时的react-hot-loader）
• 对于Vite或Create React App创建的项目，尽量使用默认配置，避免手动修改导致的Hook调用异常

你的代码参考 #

SearchBooks.jsx

import React, { useState } from "react"
import axios from 'axios'

function SearchBooks(){
  const [book, setBook] = useState('');
  const [result, setResult] = useState([]);
  const [apiKey, setApiKey] = useState("myapikey")
  
  function handleChange(event){
    setBook(event.target.value)
  }

  function handleSubmit(event){
    event.preventDefault();
    axios.get(`https://www.googleapis.com/books/v1/volumes?q=${book}&key=${apiKey}&maxResults=40`)  
    .then(data => {  
        console.log(data.data.items);  
        setResult(data.data.items);  
    })
  }
  return(
    <div className="w-full mt-10 bg-gray-100 flex justify-center items-center">
      <div className="container mx-auto dark:bg-gray-900  rounded-lg p-14">
        <form onSubmit={handleSubmit}>
          <h1 className="text-center font-bold text-white text-4xl">Find your perfect books </h1> <br />
            <div className="sm:flex items-center bg-white rounded-lg overflow-hidden px-2 py-1 justify-between">
              <input className="text-base text-gray-400 flex-grow outline-none px-2 " type="text" placeholder="Search for books" onChange={handleChange} value={book}/>
              <div className="ms:flex items-center px-2 rounded-lg space-x-4 mx-auto ">
                <button className="dark:bg-gray-900 text-white text-base rounded-lg px-4 py-2 font-thin">Search</button>
              </div>
            </div>
        </form>
      </div>
    </div>
  )
}
export default SearchBooks

app.jsx

import Header from '/components/Header'
import SearchBooks from '/components/SearchBooks'
import AboutInfo from '/components/AboutInfo'
import Tips from '/components/Tips'
import Cards from '/components/Cards'

function App() {
  return (
    <>
    <Header />
    <SearchBooks />
    <AboutInfo />
    <Tips />
    <Cards />
    </>
  );
  
}

export default App;

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