Wie kann ich den Code so ändern, dass bei der Aktualisierung nur 20 zufällige Artikel angezeigt werden, ausgenommen alle bestellten Artikel?

Question

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?

Answer 1

您可以使用 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 before

useState 将在组件第一次渲染时运行初始化代码。虽然 useState 也返回一个setter，但如果你只是想使用它，则不需要使用它在渲染之间保留特定值。