在Next.js中实现刷新时随机切换卡片组件内容

核心思路 #

无需把整个数组存入状态，直接在组件初始化（页面刷新）时从curses数组中随机挑选单个元素，将其作为当前要展示的Card内容即可。

修改步骤及代码示例 #

1. 优化page.js的状态与随机逻辑

原代码通过slice(0,1)固定取数组第一个元素，我们改为存储单个随机选中的条目：

"use client";

import Card from "./components/Card";
import { useEffect, useState } from "react";
import { curses } from "@/utils/curses";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  // 用state存储当前选中的单个条目，初始值为null
  const [currentCurse, setCurrentCurse] = useState(null);

  useEffect(() => {
    // 生成数组范围内的随机整数索引
    const randomIndex = Math.floor(Math.random() * curses.length);
    // 根据索引获取随机条目并存入状态
    setCurrentCurse(curses[randomIndex]);
  }, []); // 空依赖：仅在组件挂载（页面刷新）时执行一次

  return (
    <main className={`flex items-center justify-center h-screen ${inter.className}`}>
      {/* 确保数据存在后再渲染，避免初始null报错 */}
      {currentCurse && (
        <Card
          key={currentCurse.id} // 使用数据自身的id作为key，比index更稳定
          curse={currentCurse.curse}
          russo={currentCurse.russo}
          trad={currentCurse.trad}
        />
      )}
    </main>
  );
}

2. （可选）简化Card.js冗余代码

原Card.js中导入的curses未被使用，可直接删除：

import React from "react";

function Card({ curse, russo, trad }) {
  return (
    <div className="flex text-center items-center h-[300px] p-3 bg-card">
      <div className="h-[280px] border-2 border-black p-4">
        <h1 className="font-bold p-4 text-4xl">{curse}</h1>
        <p>Russian: {russo} </p>
        <p>Meaning: {trad} </p>
      </div>
    </div>
  );
}

export default Card;

原理说明 #

• Math.random()生成0-1的随机小数，乘以数组长度后通过Math.floor()取整，得到合法的数组索引；
• 空依赖的useEffect仅在组件首次挂载时执行，页面刷新时组件重新挂载，因此会重新生成随机索引，实现刷新切换内容的效果；
• 使用数据自身的id作为key，符合React最佳实践，避免因索引变化导致的组件渲染异常。

内容的提问来源于stack exchange，提问作者user20137567