在onClick处理函数中调用React Hook逻辑出现无效调用报错如何解决

错误原因 #

你触发报错的核心原因是违反了React Hook的调用规则：所有Hook必须在React函数组件、自定义Hook的顶层作用域调用，不能嵌套在回调函数、事件处理器、条件判断/循环语句内部。

你当前代码里把useState({})写在了refresh函数内，而refresh是点击按钮才触发的事件回调，不属于自定义Hook的顶层执行上下文，所以触发了Hook调用规则校验错误。

修复方案 #

把所有Hook调用移到自定义Hook的顶层，状态更新操作可以在回调函数内执行，如果你需要在刷新时请求接口更新数据，按如下逻辑调整即可：

const {useState, useCallback} = React;

const useRefreshArtifacts = (setArtifactsStore) => {
  // 所有Hook必须放在自定义Hook顶层
  const [match, setMatch] = useState({});

  // 用useCallback包裹refresh避免不必要的重渲染
  const refresh = useCallback(async () => {
    console.log("do some stuff with state");
    // 这里写你的fetch请求逻辑示例
    // const res = await fetch('/your/api/path')
    // const artifacts = await res.json()
    // setArtifactsStore?.(artifacts)
    
    // 要更新match状态直接调用顶层定义的setMatch即可
    setMatch(prev => ({...prev, updateTime: Date.now()}))
  }, [setArtifactsStore])

  return {refresh, match};
};

function ArtifactApp(props) {
  const {refresh} = useRefreshArtifacts("");
  return (<div><button onClick={refresh}>Hello</button></div>);
}

const AppContainer = () => {
  return (<div><ArtifactApp /></div>);
}

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

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