如何修改代码以在刷新时仅显示 20 个随机项目，不包括任何订购的项目？

Question

我在这里问了一个关于如何从该 JSON 中获取 20 个随机项目的问题，我使用了如下答案之一：

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

有一个问题，当我刷新时，我看到该 JSON 的有序 20 个项目，然后突然变为随机 20 个项目；如何修复代码，以便当我刷新时只能看到随机的 20 个项目，而看不到那些订购的项目？

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，但如果你只是想使用它，则不需要使用它在渲染之间保留特定值。