在回调函数中使用自定义钩子答案

【问题标题】：Use custom hook in callback function在回调函数中使用自定义钩子
【发布时间】：2021-02-23 03:22:22
【问题描述】：

我有一个 customHook，我需要在两个地方调用它。一个是在组件的顶层。另一个地方是一个按钮的 onclick 函数，这个按钮是一个刷新按钮，它调用 customHook 来获取新数据，如下所示。我正在考虑两种方法：

为数据创建状态，在组件中调用hook并设置数据状态，在onclick函数中，调用hook并设置数据状态。但是，在这种情况下，不能在另一个函数中调用该钩子，即 onclick。
创建一个称为触发器的布尔状态，每次单击按钮时，切换触发器状态并将触发器状态传递到依赖列表中的 myCallback 以便重新创建 myCallback 函数，并调用挂钩。但是，我真的不需要在回调函数中使用这个触发状态，并且钩子给了我删除不必要的依赖的错误。我真的很喜欢这个想法，但是有没有办法克服这个问题？

或者有没有其他方法可以实现这个目标？

const MyComponent = () => {  
     const myCallback = React.useCallback(() => { /*some post processing of the data*/ }, []);  
     const data = customHook(myCallback);  

     return <SomeComponent data={data}>
                 <button onclick={/*???*/}></button>
             </SomeComponent>; 
 };

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

可以通过一些调整使您的第二个示例正常工作。无需传入依赖项来更新效果函数，只需使效果函数成为您传递给 useEffect 的独立函数，但也可以在其他地方调用（例如，您可以从挂钩返回效果函数，以便您的挂钩用户也可以用）

例如：

const App = () => {
  const { resource, refreshResource } = useResource()
  return (
    <div>
      <button onClick={refreshResource}>Refresh</button>
      {resource || 'Loading...'}
    </div>
  )
}

const useResource = () => {
  const [resource, setResource] = useState(null)
  const refreshResource = async () => {
    setResource(null)
    setResource(await fetchResource())
  }
  useEffect(refreshResource, [])
  return { resource, refreshResource }
}

const fetchResource = async () => {
  await new Promise(resolve => setTimeout(resolve, 500))
  return Math.random()
}

编辑

我没有意识到钩子不能被编辑。老实说，我想不出任何好的解决方案来解决您的问题-也许不存在。理想情况下，提供此自定义挂钩的 API 还可以提供一些较低级别的绑定，您可以使用它们来解决此问题。

如果最坏的情况变得最糟，并且您必须继续使用一些骇人听闻的解决方案，那么更新回调的解决方案 #2 应该可以工作（假设自定义挂钩在参数更改时重新获取资源）。你只需要绕过 linting 规则，如果正在使用 eslint，我很确定你可以在导致问题的行上添加 /* eslint-disable-line */ 注释。最糟糕的是，您可以使用触发参数调用 noop 函数 () => {} - 这应该可以避免 linter。

【讨论】：

我认为您示例中的 useResource 是 customHook，但我无法修改该 customHook。