J'ai posé une question ici sur la façon d'obtenir 20 éléments aléatoires à partir de ce JSON et j'ai utilisé l'une des réponses ci-dessous :
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>
))}
Il y a un problème, lorsque j'actualise, je vois le JSON avec 20 éléments commandés, puis tout d'un coup, il se transforme en 20 éléments aléatoires ; comment puis-je corriger le code pour que lorsque j'actualise, je ne vois que les 20 éléments aléatoires, et je peux Vous ne voyez pas les articles commandés ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez utiliser
useState来提供在第一次渲染时生成的一致（随机）排序，而不是使用useEffectpour mettre à jour le tri après le premier rendu :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将在组件第一次渲染时运行初始化代码。虽然useStaterenvoie également un setter , mais vous n'avez pas besoin de l'utiliser pour conserver une valeur spécifique entre les rendus si vous souhaitez simplement l'utiliser.