reactjs 如何制作一个不会立即运行的钩子[已关闭]

w8ntj3qf 于 2023-01-30 发布在 React

关注(0)|答案(2)|浏览(112)

- 已关闭**。此问题需要details or clarity。当前不接受答案。
- 想要改进此问题？**添加详细信息并通过editing this post阐明问题。

18小时前关门了。
Improve this question
如何创建一个在运行之前不会立即运行的自定义HookInReact
像这样

const [UsingFC ,{props}] = useHook();

像apollo图形客户端一样使用LazyQuery

reactjs

来源：https://stackoverflow.com/questions/75270707/how-to-make-a-hook-that-doesnt-run-immediately

2条答案

按热度按时间

rvpgvaaj1#

基本上没有什么真正有趣的实现，您只是返回一个带有触发器方法和数据对象的数组。

const { useCallback, useState } = React;

const useHook = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(undefined);

  const getData = useCallback(() => {
    setIsLoading(true);

    // do your fetch or whatever
    setTimeout(() => {
      setData("data");
      setIsLoading(false);
    }, 1000);
  }, []);

  return [getData, { isLoading, data }];
};

function App() {
  const [getData, { isLoading, data }] = useHook();

  return (
    <div className="App">
      <p>IsLoading: {isLoading.toString()}</p>
      <p>Data: {data}</p>

      <button type="button" onClick={getData}>
        Get
      </button>
    </div>
  );
}

// v18.x+
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>

赞(0）回复(0）举报 2023-01-30

dced5bon2#

如果你不想在钩子运行的时候执行某段代码，你的钩子可以返回一个函数来 Package 这段代码，并且你可以根据需要运行它。

赞(0）回复(0）举报 2023-01-30