Ich habe hier eine Frage dazu gestellt, wie man 20 zufällige Elemente aus diesem JSON erhält, und ich habe eine der folgenden Antworten verwendet:
const a = Myjson;
useEffect(() => {
for (let i = a.length; i-- > 0; ) {
const j = Math.floor(Math.random() * i); // 0 ≤ j ≤ i
[a[i], a[j]] = [a[j], a[i]];
}
}, []);
{a
.slice(0, 20)
.map((item) => (
<Link
href={item.ud}
key={item.id}
>
{item.test}
</Link>
))}
Es gibt ein Problem: Wenn ich aktualisiere, sehe ich den JSON mit den bestellten 20 Artikeln und dann ändert er sich plötzlich in zufällige 20 Artikel. Wie kann ich den Code so korrigieren, dass ich beim Aktualisieren nur die zufälligen 20 Artikel sehe? Sie sehen die bestellten Artikel nicht?
您可以使用
useState来提供在第一次渲染时生成的一致（随机）排序，而不是使用useEffect在第一次渲染后更新排序：const [a] = useState(() => { // Same code as in your useEffect, but with `a` renamed for clarity let b = [...Myjson]; // take a copy of the array for (let i = b.length; i-- > 0; ) { const j = Math.floor(Math.random() * i); // 0 ≤ j ≤ i [b[i], b[j]] = [b[j], b[i]]; } return b; // Return value is used as the state value }); // ... rendering code as beforeuseState将在组件第一次渲染时运行初始化代码。虽然useState也返回一个setter，但如果你只是想使用它，则不需要使用它在渲染之间保留特定值。