ReactJS过多重渲染警告修复求助：每日解锁卡片项目

问题描述 #

我是ReactJS新手，正在开发一个卡片项目，需求是到对应日期时解锁指定卡片。目前代码功能正常，但控制台出现“too many re-renders”（过多重渲染）警告，请问该如何修复？
PS：我知道这段代码写得不好，正在努力改进技术 :)

附带代码：

const d = new Date();
const gunler = [      // 土耳其语的星期几，比如周一、周二等
  "Pazartesi",
  "Salı",
  "Çarşamba",
  "Perşembe",
  "Cuma",
  "Cumartesi",
  "Pazar",
];
const bugun = gunler[(d.getUTCDay() + 6) % 7];
const [isPazartesi, setPazartesi] = useState(false);
const [isSalı, setSalı] = useState(false);
const [isÇarşamba, setÇarşamba] = useState(false);
const [isPerşembe, setPerşembe] = useState(false);
const [isCuma, setCuma] = useState(false);
const [isCumartesi, setCumartesi] = useState(false);
const [isPazar, setPazar] = useState(false);

const updateStatesBasedOnDay = (day) => {
  if (day === gunler[0]) {
    setPazartesi(true);
  }
  if (day === gunler[1]) {
    setPazartesi(true);
    setSalı(true);
  }
  if (day === gunler[2]) {
    setPazartesi(true);
    setSalı(true);
    setÇarşamba(true);
  }
  if (day === gunler[3]) {
    setPazartesi(true);
    setSalı(true);
    setÇarşamba(true);
    setPerşembe(true);
  }
  if (day === gunler[4]) {
    setPazartesi(true);
    setSalı(true);
    setÇarşamba(true);
    setPerşembe(true);
    setCuma(true);
  }
  if (day === gunler[5]) {
    setPazartesi(true);
    setSalı(true);
    setÇarşamba(true);
    setPerşembe(true);
    setCuma(true);
    setCumartesi(true);
  }
  if (day === gunler[6]) {
    setPazartesi(true);
    setSalı(true);
    setÇarşamba(true);
    setPerşembe(true);
    setCuma(true);
    setCumartesi(true);
    setPazar(true);
  }
}
updateStatesBasedOnDay(bugun);
return (... // 这里有7个卡片组件，每天解锁一个，每个组件里有类似 ${isPazartesi ? "" : "transform-none"} 的代码);

问题原因 #

直接在组件渲染逻辑中调用updateStatesBasedOnDay(bugun)，而该函数内部会触发多个setState调用。React中setState会引发组件重新渲染，每次渲染又会重复执行该函数并触发新的setState，形成无限循环，最终导致“过多重渲染”警告。

修复方案 #

方案1：用useEffect控制状态更新时机 #

将状态更新逻辑放到useEffect钩子中，仅在组件初始化或当天日期变化时执行：

import { useState, useEffect } from 'react';

// 其余代码保持不变

useEffect(() => {
  updateStatesBasedOnDay(bugun);
}, [bugun]); // 仅当bugun（当天日期）变化时执行该逻辑

// 移除原来直接调用的updateStatesBasedOnDay(bugun);

方案2：优化状态结构（更简洁的写法） #

将7个独立的状态变量合并为一个对象，同时简化逻辑，避免冗余的setState调用：

import { useState, useEffect } from 'react';

const d = new Date();
const gunler = [
  "Pazartesi",
  "Salı",
  "Çarşamba",
  "Perşembe",
  "Cuma",
  "Cumartesi",
  "Pazar",
];
const bugun = gunler[(d.getUTCDay() + 6) % 7];
// 用一个对象统一存储所有日期的解锁状态
const [unlockedDays, setUnlockedDays] = useState({});

useEffect(() => {
  const currentDayIndex = gunler.indexOf(bugun);
  // 生成解锁状态：当前日期及之前的所有日期均解锁
  const newUnlockedState = gunler.reduce((acc, day, index) => {
    acc[day] = index <= currentDayIndex;
    return acc;
  }, {});
  setUnlockedDays(newUnlockedState);
}, [bugun]);

// 使用时改为：unlockedDays.Pazartesi ? "" : "transform-none"

这种写法不仅解决了重渲染问题，还大幅简化了代码逻辑，避免了多状态变量带来的冗余。

内容的提问来源于stack exchange，提问作者Hüseyin Y.