React出现Invalid hook call报错，静态方法内调用useState使用Fuse失败如何解决

问题根本原因 #

• React Hook 只能在函数组件的顶层或者自定义Hook内部调用，你当前的useState写在类组件的静态方法renderForecastsTable中，完全不符合Hook的调用规则，这就是报错的核心原因，和Fuse库、开发工具无关。
• 你的代码还存在另一处语法错误：setQuery是状态更新函数，不能直接赋值setQuery = value，正确写法是setQuery(value)。

解决方案 #

方案1：将静态方法改造为独立函数组件（推荐） #

把当前的渲染逻辑抽成单独的函数组件，直接在组件内部使用Hook：

function ForecastsTable({ forecasts }) {
  const [query, setQuery] = useState('');
  const fuse = new Fuse(forecasts, { keys: ['mjesto'] })
  const results = fuse.search(query);
  console.log(results);

  function handleOnSearch({ currentTarget = {} }) {
    const { value } = currentTarget;
    setQuery(value);
  }

  return (
    // 此处保留你原来的渲染代码，记得给搜索输入框绑定onChange={handleOnSearch}
  )
}

原来的类组件中需要用到这个表格的位置，直接用组件标签调用即可：<ForecastsTable forecasts={forecasts} />

方案2：保留类组件写法，替换Hook为类组件状态管理 #

如果不想改动现有类组件的架构，就不要使用useState，把query放到类组件的state中管理：

// 类组件内部的state定义
state = {
  query: ''
}

// 搜索处理方法写在类组件内部
handleOnSearch = ({ currentTarget = {} }) => {
  const { value } = currentTarget;
  this.setState({ query: value })
}

renderForecastsTable(forecasts) {
  const { query } = this.state;
  const fuse = new Fuse(forecasts, { keys: ['mjesto'] })
  const results = fuse.search(query);
  console.log(results);
  return (
    // 原来的渲染代码，搜索输入框绑定onChange={this.handleOnSearch}
  )
}

内容的提问来源于stack exchange，提问作者robin šćulac