React组件中useState报错无法渲染，该如何解决？

你遇到的报错核心原因是违反了React Hooks的调用规则，先看你的错误代码：

import * as C from './style';
import LupaImage from '../../assets/lupa.png';
import { ChangeEvent, useState } from 'react';

// 错误：useState和handleSearchProduct放在了组件函数外部
const [searchProduct, setSearchProduct] = useState('');

const handleSearchProduct = (e: ChangeEvent<HTMLInputElement>) => {
  setSearchProduct(e.target.value)
}

export const ResearchField = () => {
  return (
    <C.ResearchField>
      <C.Logo src={LupaImage} />
      <C.InputSearch placeholder='Busque pelo Produto' />
    </C.ResearchField>
  )
}

修正方案 #

把useState声明和依赖它的handleSearchProduct函数，移到组件函数的内部顶层作用域中：

import * as C from './style';
import LupaImage from '../../assets/lupa.png';
import { ChangeEvent, useState } from 'react';

export const ResearchField = () => {
  // 将useState移到组件函数内部
  const [searchProduct, setSearchProduct] = useState('');

  const handleSearchProduct = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchProduct(e.target.value)
  }

  return (
    <C.ResearchField>
      <C.Logo src={LupaImage} />
      {/* 绑定value和onChange，实现受控输入 */}
      <C.InputSearch 
        placeholder='Busque pelo Produto' 
        value={searchProduct}
        onChange={handleSearchProduct}
      />
    </C.ResearchField>
  )
}

原因说明 #

React Hooks（比如useState）必须遵循两个核心规则：

1. 只能在React函数组件或自定义Hook的内部调用
2. 必须在组件的顶层作用域调用（不能放在条件、循环、嵌套函数里）

你之前把useState放在组件函数外部，此时没有React组件的渲染上下文，React无法正确初始化Hook，因此抛出Cannot read properties of null (reading 'useState')错误。另外，handleSearchProduct依赖setSearchProduct，放在组件内部才能确保每次渲染都能访问到最新的状态更新函数。

额外补充：修正后的代码给输入框绑定了value和onChange，这是实现受控搜索输入的必要步骤，否则handleSearchProduct不会被触发。

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