`useSearchParams` 需要 `Suspense` 边界，尽管没有导出模块

Question

这是我目前的用法

useSearchParams

:

  let rawValue = useSearchParams().get("val");
  let val = 0.001;
  if (rawValue) {
    val = parseFloat(rawValue);
  }

这是我对 useSearchParams 的唯一用法，并且我没有使用任何可以使用 useSearchParams 的外部库。 我应该怎么办？ 我怀疑这是否是该警告的预期用途。 有什么想法吗？

Answer 1

您遇到的错误表明 Next.js 应用程序中的 useSearchParams 需要 Suspense 边界。这是典型的，因为 useSearchParams 可能在幕后使用异步数据获取，这需要在 Suspense 边界内处理以确保正确的加载状态。

以下是如何使用 Suspense 边界包装组件的示例：

<!-- language: lang-html -->

import React, { Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import MyComponent from './MyComponent';

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;