使用 SWR 使用多个获取请求不包含在 act() 中的更新

问题描述

我有一个测试，如果 /endpoint1 失败，应该显示错误消息。测试通过，但是我从 React 测试库收到以下错误：

Warning: An update to HomePage inside a test was not wrapped in act(...).

为了清楚起见，这里是狙击手。您可以看到我正在使用

发送请求。我正在使用 SWR 模拟请求。

export default function App() {
  const { data: data1,error: error1 } = useSwr("/endpoint1")
  const { data: data2,error: error2 } = useSwr("/endpoint2")

  if (error1 || error2) {
    return <Error />
  }

  return <Success />
}

出现错误是因为 /endpoint2 在 /endpoint1 之后解析，导致组件重新渲染。我相信一旦出现第一个错误就取消第二个请求会奏效。我在使用 useSwr() 的 AbortController() 周围做了一个包装器并公开了一个 cancel() 函数，但是这个代码段会发生同样的错误：

export default function App() {
  const { data: data1,error: error1,cancel: cancel1 } = useCancellableSwr(
    "/endpoint1"
  )
  const { data: data2,error: error2,cancel: cancel2 } = useCancellableSwr(
    "/endpoint2"
  )

  if (error1 || error2) {
    if (!data1 || !error1) cancel2()
    if (!data2 || !error2) cancel1()
    return <p>Error</p>
  }

  return <p>Success</p>
}

出于某种原因，即使取消了一个端点，它仍然会解析并导致重新渲染。我在这里错过了什么吗？谢谢

编辑：

这是失败的测试：

  test("An error shows if unable to fetch /endpoint1",async () => {
    mockServer.use(
      rest.get("/endpoint1",(_,res,ctx) => res(ctx.status(500)))
    )

    mockServer.use(
      rest.get("/endpoint2",ctx) => res(ctx.status(200)))
    )

    render(<App />)

    const error = await screen.findByText("Error")
    expect(error).toBeInTheDocument()
  })

还有我的自定义提取器功能：

async function serverFetch(endpoint) {
  const response = await fetch("http://localhost:8080" + endpoint)
  
  const body = response.json()

  if (!response.ok) {
    throw  new Error("An error occurred while fetching the data.")
  }

  return body
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）