Reactjs 在 Nextjs 中使用 useEffect 随机化一个数组

发布于07月23日

我想在每次加载页面时随机化一个array.我正在使用Nextjs，第一个问题是客户端和服务器不匹配，所以有人建议我需要将随机代码放在useEffect挂钩中，但我显然做错了……我想要一些帮助来了解如何修复我的代码.

export default function IndexPage() {
  useEffect(()=>{
    let randomizeArray = [...array].sort(() => 0.5 - Math.random());

    let selectedRandomArray = randomizeArray.slice(0, 3);
  },[])

  return (
    <div>
      {selectedRandomArray.map((s, id) => (
        <div key={id}>
          <h2>{s.name}</h2>
        </div>
      ))}
    </div>
  );
}

下面是Codesandbox中没有useEffect的示例.它可以工作，但我在控制台中获得了无与伦比的客户端/服务器

推荐答案

除了在useEffect中移动随机逻辑外，还必须创建状态变量(randomArray)并将随机数组存储到其中(setRandomArray()).这将触发组件重新渲染并显示更新的UI.

const array = [{ name: 1 }, { name: 2 }, { name: 3 }, { name: 4 }, { name: 5 }];

export default function IndexPage() {
    const [randomArray, setRandomArray] = useState([]);
    
    useEffect(() => {
        const randomizeArray = [...array].sort(() => 0.5 - Math.random());
        setRandomArray(randomizeArray.slice(0, 3));
    }, []);

    return (
        <div>
            {randomArray.map((s, id) => (
                <div key={id}>
                    <h2>{s.name}</h2>
                </div>
            ))}
        </div>
    );
}

Reactjs相关问答推荐

如何在Pivot模式下自定义标题？

如何使用React防止并发注册并处理Firestore数据库中的插槽可用性

根据另一个Select中的选定值更改Select中的值

两条react 路由的行为不同.有没有人能解释一下，我已经找了好几天了

Reactjs 在 Nextjs 中使用 useEffect 随机化一个数组

推荐答案

Reactjs相关问答推荐

如何在Pivot模式下自定义标题？

如何使用React防止并发注册并处理Firestore数据库中的插槽可用性

根据另一个Select中的选定值更改Select中的值

两条react 路由的行为不同.有没有人能解释一下，我已经找了好几天了

在数组对象内的数组上进行映射

Next.js Next-Auth登录函数重定向到http：//localhost：3000/api/auth/error

安装使用环境的BIT组件的依赖项

React 为什么标签导致 onClick 事件运行 2 次？

如何解决使用react-hook-form和yup动态创建的输入不集中的问题

在MongoDB中，如何获取最后N条记录中字段不为空或不为空字符串的数据

在react 中单击父级中的按钮时如何将数据从子级发送到父级？

React - 使用 useEffect 还是直接在 onChange 方法中更改值对性能最好？

下一个js如何从另一个组件更新组件？

单元测试 useLoaderData() react-router v6 加载器函数

无法读取未定义的react native 的属性参数

如何通过onpress on view in react native flatlist来降低和增加特定视图的高度？

如何在对话素材ui中设置边框半径？

React - 仅在变量为真时显示项目

设置 Material UI 表格默认排序

React useEffect hooks return () => cleanup() vs return cleanup