在 Nextjs 中使用 useEffect 随机化数组

Question

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

\n

export default function IndexPage() {\n  useEffect(()=>{\n    let randomizeArray = [...array].sort(() => 0.5 - Math.random());\n\n    let selectedRandomArray = randomizeArray.slice(0, 3);\n  },[])\n\n  return (\n    <div>\n      {selectedRandomArray.map((s, id) => (\n        <div key={id}>\n          <h2>{s.name}</h2>\n        </div>\n      ))}\n    </div>\n  );\n}\n

\n

这是 Codesandbox 中没有 useEffect 的示例。它有效，但我\xc2\xb4m在控制台中得到不匹配的客户端/服务器\n https://codesandbox.io/s/shuffle-array-and-return-random-values-in-nextjs-veqy3w?file=/pages/索引.js

\n

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>
    );
}