Comment puis-je modifier le code pour afficher uniquement 20 éléments aléatoires lors de l'actualisation, à l'exclusion des éléments commandés ?

Question

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 ?

Answer 1

Vous pouvez utiliser useState 来提供在第一次渲染时生成的一致（随机）排序，而不是使用 useEffect pour 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 before

useState 将在组件第一次渲染时运行初始化代码。虽然 useState renvoie é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.