React Hook渲染错误排查：根据截止日期动态设置文本颜色

首先，你遇到的"Rendered more hooks than during the previous render"错误，核心原因是违反了React Hook的使用规则：你在循环调用的ChangeStyle函数内部使用了useEffect，而React要求所有Hook必须在组件的顶层作用域调用，不能嵌套在循环、条件判断或者子函数中。

另外，你用全局的color状态来控制所有任务的颜色，这会导致所有任务共用同一个颜色值，逻辑上也不正确——每个任务应该根据自己的截止日期独立判断颜色。

最优解决方案：纯计算函数，无需状态和Hook #

因为任务颜色是基于截止日期和当前日期的纯逻辑计算，完全不需要使用状态或Hook。直接写一个纯函数返回对应颜色，在渲染每个任务时调用即可：

1. 定义计算颜色的纯函数：

const getTaskColor = (deadline) => {
  if (!deadline) return 'black';
  const today = new Date().toISOString().substring(0, 10);
  return deadline < today ? 'red' : 'black';
};

2. 在渲染循环中为每个任务单独计算颜色：

return (
  <div>
    {todos.map((todo, index) => {
      // 为当前任务单独计算颜色
      const taskColor = getTaskColor(todo.date);
      return (
        <div key={index} className="task">
          <Popup 
            className="detailedTask" 
            trigger={
              <button style={{ color: taskColor }}>
                {todo.title}<br />{todo.date} 
              </button>
            } 
            open={show} 
            onOpen={openform} 
            position="right center" 
            nested 
            modal
          >
            <button style={{ color: taskColor }}>{todo.title}<br />{todo.date}</button>
          </Popup>
        </div>
      );
    })}
  </div>
);

为什么之前的方法行不通？ #

• Hook使用违规：ChangeStyle在map循环中被多次调用，每次调用都会执行内部的useEffect，导致React每次渲染时Hook的数量不一致，触发错误。
• 全局状态冲突：单个color状态会被所有任务共享，当某个任务触发状态更新时，所有任务的颜色都会变成最新的color值，无法实现每个任务独立的颜色控制。

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