在 Nextjs 中使用 useEffect 随机化数组

Question

我想在每次加载页面时随机化一个数组。我正在使用 Nextjs，第一个问题是客户端和服务器不匹配，所以有人建议我需要将随机代码放入 useEffect 挂钩中，但我显然做错了......我'我需要一些帮助来了解如何修复我的代码。

export default function IndexPage() {
  useEffect(()=>{
    let randomizeArray = [...array].sort(() => 0.5 - Math.random());

    let selectedRandomArray = randomizeArray.slice(0, 3);
  },[])

  return (
    <div>
      {selectedRandomArray.map((s, id) => (
        <div key={id}>
          <h2>{s.name}</h2>
        </div>
      ))}
    </div>
  );
}

这是 Codesandbox 中没有 useEffect 的示例。它有效，但我在控制台中得到了无与伦比的客户端/服务器 https://codesandbox.io/s/shuffle-array-and-return-random-values-in-nextjs-veqy3w?file=/pages/index.js

Answer 1

除了将随机逻辑移动到

useEffect

内之外，您还必须创建一个状态变量 (

randomArray

) 并将随机数组存储到其中 (

setRandomArray()

)。这将触发组件重新渲染并显示更新的 UI。

const array = [{ name: 1 }, { name: 2 }, { name: 3 }, { name: 4 }, { name: 5 }];

export default function IndexPage() {
    const [randomArray, setRandomArray] = useState([]);
    
    useEffect(() => {
        const randomizeArray = [...array].sort(() => 0.5 - Math.random());
        setRandomArray(randomizeArray.slice(0, 3));
    }, []);

    return (
        <div>
            {randomArray.map((s, id) => (
                <div key={id}>
                    <h2>{s.name}</h2>
                </div>
            ))}
        </div>
    );
}

Answer 2

在新的应用程序路由器中，您不必使用

useEffect

或在客户端上渲染，以便它在每次页面加载时重新渲染组件。您可以将路线段配置与

force-dynamic

选项一起使用。

这是一个例子：

export const dynamic = "force-dyanmic";

export default function Page() {
  const randomizeArray = [...array].sort(() => 0.5 - Math.random());

  return (
    <div>
      {selectedRandomArray.map((s, id) => (
        <div key={id}>
          <h2>{s.name}</h2>
        </div>
      ))}
    </div>
  );
}

我相信

dynamic

配置应该位于

Page

、

Layout

或

Route

处理程序上，它将强制对整个路线进行实时（又名“动态”）渲染。

这样做的优点是您可以将其与 SSR 或 RSC 一起使用，这样页面加载速度会更快，并且可以更快且完整地可用。缺点是，如果您的路线需要进行大量渲染 - 每次请求新页面时，它都会渲染整个路线。