Bagaimanakah saya boleh mengubah suai kod untuk memaparkan hanya 20 item rawak semasa muat semula, tidak termasuk sebarang item yang dipesan?

Question

Saya bertanya soalan di sini tentang cara mendapatkan 20 item rawak daripada JSON ini dan saya menggunakan salah satu jawapan di bawah:

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

Ada masalah, apabila saya menyegarkan, saya melihat JSON dengan pesanan 20 item dan kemudian tiba-tiba ia berubah kepada 20 item secara rawak bagaimana saya boleh membetulkan kod supaya apabila saya menyegarkan, saya hanya melihat 20 item secara rawak, Dan boleh tidak nampak barang yang dipesan itu?

Answer 1

Anda boleh menggunakan useState 来提供在第一次渲染时生成的一致（随机）排序，而不是使用 useEffect untuk mengemas kini pengisihan selepas paparan pertama:

  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 juga mengembalikan penetap , tetapi anda tidak perlu menggunakannya untuk mengekalkan nilai tertentu antara pemaparan jika anda hanya mahu menggunakannya.