React调用API渲染页面问题时出现无效Hook调用报错该如何解决？

问题原因 #

• 核心错误是你在onClick={FetchQuestion}中直接把组件函数当做普通回调调用了：React Hook只能在组件顶层渲染阶段或者自定义Hook内部执行，直接在事件回调里调用组件函数，相当于普通函数执行上下文调用Hook，不符合Hook调用规则，就会抛出无效Hook调用的错误。
• 现有逻辑里useEffect依赖项是空数组，只会在组件首次挂载时执行一次请求，本身也不支持点击刷新的需求。
• 小细节问题：原代码中useState初始值设置为数组[]，但实际存储的是问题字符串，类型不匹配存在潜在隐患。

修复方案 #

把请求逻辑抽离成独立函数，点击按钮时直接调用该函数即可，无需重新调用整个组件，修复后代码如下：

function FetchQuestion(){
  const [triviaq, setTriviaq] = React.useState("");

  // 抽离单独的请求函数
  const fetchNewQuestion = () => {
    fetch('https://opentdb.com/api.php?amount=1')
      .then(response => response.json())
      .then(data => {
        setTriviaq(data.results[0].question);
      })
      .catch(err => console.error(err))
  }

  // 首次挂载执行一次请求
  React.useEffect(() => {
    fetchNewQuestion();
  }, []);

  return(
    <div>
      Question: {triviaq}
      {/* 点击调用请求函数，不是调用组件 */}
      <button onClick={fetchNewQuestion}> Next Question </button>
    </div>
  )
}

ReactDOM.render(<FetchQuestion/>, document.getElementById("root"))

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