修改渲染数组长度时React出现钩子渲染数量不一致错误如何解决

你触发React Error: "Rendered more hooks than during the previous render"报错的核心原因是：你把ProjectButton组件定义在了父组件Projects的内部。
每次Projects组件重渲染（比如点击加载更多更新项目列表时），都会重新生成一个全新的ProjectButton函数，React不会把两次渲染的ProjectButton识别为同一个组件，内部的useState会被判定属于父组件的钩子调用。随着渲染的项目数量变化，钩子调用的总次数每次都不一致，直接违反了React钩子的调用规则：必须在组件顶层按固定顺序、固定数量调用。

把ProjectButton组件移到Projects组件的外部独立定义，通过props传递参数即可。同时调用组件时需要使用标准JSX语法，不要直接调用组件函数。

修改后的完整代码如下：

import { projects } from "../lib/projectList";
import { FC, useState } from "react";

// ProjectButton移到父组件外部独立定义
const ProjectButton: FC<{ type: string; link: string }> = (button) => {
  // 补充原代码缺失的初始颜色变量声明
  const originalColor = "#0327d8";
  const [hoverColor, setHoverColor] = useState(originalColor);

  const handleMouseEnter = () => {
    setHoverColor("white");
  };
  const handleMouseLeave = () => {
    setHoverColor(originalColor);
  };

  return (
    <a href={button.link} rel="noreferrer" target="_blank">
      <button onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
        <WebsiteIcon className="projectButtonIcon" fill={hoverColor} />
        <p>{button.type}</p>
      </button>
    </a>
  );
};

const Projects: FC = () => {
  // 初始仅渲染前3条项目
  const [projectArray, setProjectArray] = useState(projects.slice(0, 3));

  // 点击加载完整项目列表
  const loadMoreProjects = () => {
    setProjectArray([...projects]);
  };

  return (
    <>
      {projectArray.map((project, projectIndex) => (
        {/* 此处保留你原有项目其他渲染逻辑 */}
        <div className="projectLinks" key={projectIndex}>
          {project.buttons.map((button) => (
            {/* 用JSX语法调用组件，不要直接调用函数 */}
            <ProjectButton 
              key={button.link}
              type={button.type} 
              link={button.link} 
            />
          ))}
        </div>
      ))}
      <Button onClick={loadMoreProjects}>加载更多</Button>
    </>
  );
}

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