React+Firebase项目：页面加载时随机展示7条花卉数据

1. 调整状态存储 #

新增一个状态保存全部花卉数据，避免重复请求Firebase；原plants状态专门存储首页需要的随机7种花卉：

const [allPlants, setAllPlants] = useState([]); // 存储所有花卉数据
const [plants, setPlants] = useState([]); // 存储首页展示的随机7种花卉

2. 修改数据获取逻辑 #

获取完整数据后，先存入allPlants，再生成随机7个样本存入plants：

const getPlants = async () => {
  const data = await getDocs(plantsCollectionRef);
  const allData = data.docs.map(doc => ({ ...doc.data(), id: doc.id }));
  setAllPlants(allData);
  // 生成随机7个不重复的花卉
  const randomPlants = getRandomItems(allData, 7);
  setPlants(randomPlants);
};

useEffect(() => {
  getPlants();
}, []);

3. 实现随机选择函数 #

添加工具函数，从数组中随机挑选指定数量的不重复元素（自动处理花卉总数不足7的情况）：

function getRandomItems(arr, count) {
  // 确保选取数量不超过数组实际长度
  const actualCount = Math.min(count, arr.length);
  // 打乱数组后截取前N个元素
  const shuffledArr = [...arr].sort(() => 0.5 - Math.random());
  return shuffledArr.slice(0, actualCount);
}

4. 页面区分渲染 #

• 首页：保持你现有返回部分的代码，直接遍历plants状态渲染即可
• 全部花卉页面：遍历allPlants状态渲染所有花卉

如果需要在同一个组件中切换展示，可以添加状态控制：

const [showAll, setShowAll] = useState(false);

// 渲染逻辑
{(showAll ? allPlants : plants).map(plant => (
  <div className="plant-card" key={plant.id}>
    <img src={plant.image} alt={plant.name} loading="lazy" />
    <div>
      <h3>{plant.name}</h3>
      <p>${plant.price}</p>
    </div>
    <div>
      <p>Read more...</p>
      <p>Buy</p>
    </div>
  </div>
))}

// 切换按钮
<button onClick={() => setShowAll(!showAll)}>
  {showAll ? "返回首页" : "查看全部花卉"}
</button>

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