小编Mar*_*tzy的帖子

我想通过以下方式实现这个场景react-query：

我的组件获取一个 API，并且应该在客户端的互联网断开连接时尝试一次，并且如果重新连接互联网则永远不会重新获取...并且在 3 秒后如果重试不成功，应该显示错误并带有用于重试请求的按钮。

const URL = 'https://randomuser.me/api/?results=5&inc=name';

const Example = () => {
  const { error, data, isLoading, refetch } = useQuery('test', () =>
    fetch(URL).then(response => response.json()).then(data => data.results), {
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    retry: 1,
    retryDelay: 3000
  });

  if (isLoading) return <span>Loading...</span>

  if (error) return <span>Error: {error.message} <button onClick={refetch}>retry</button></span>

  return (
    <div>
      <h1>Length: {data ? console.log(data.length) : null}</h1>
      <button onClick={refetch}>Refetch</button>
    </div>
  )
}

考虑到上面的代码，我设置refetchOnReconnect: false为在连接互联网后禁用重新获取，retry: 1设置一次尝试并retryDelay: 3000设置重试时间限制。

但是当我在 DevTools …

我想测试一个自定义钩子react-testing-library，因此我将以下代码添加到 beforeEach 中：

let renderedHook ;

beforeEach(() => {
  renderedHook = renderHook(() => useFetch());
});

test('.....', () => {
  expect(renderedHook.current.data).toBe(1);
});

上面的代码运行良好！但我使用的是 TypeScript，在这种情况下合适的类型是什么let renderedHook ？

我有一个自定义的 React 钩子，它本身使用了react-query useQuery()：

const useFetchSomething = () => {
  const { data, isLoading } = useQuery('key', ....);
  return .......
}

我必须创建一个自定义挂钩，然后使用useQuery()其中的挂钩，因为它有一些功能并从反应查询获取数据！

我尝试用以下方法测试这个钩子react-hooks-testing-library：

const { result } = renderHook(() => useFetchSomething());

但我收到此错误：

Error: Uncaught [Error: No QueryClient set, use QueryClientProvider to set one]

为此，我该如何包装这部分：renderHook(() => useFetchSomething())与提供者？

假设，我有这个字符串：

google.com/:id/:category

我怎样才能从这个字符串中只提取id和类别？

我应该使用正则表达式

这场比赛不起作用：

match(/\/:([a-zA-Z0-9]*)/g);