React/Next.js中ReferenceError: handleClick未定义问题求助

我在React代码中遇到了ReferenceError: handleClick is not defined错误，以下是引发错误的代码：

const services = [
  {
    title: (
      <AccordionHeader>
        <AccordionLeft>
          <span>01</span>
        </AccordionLeft>
        <AccordionRight className="icon-container">
          <p>Project Name</p>
          <BsArrowRight
            onClick={handleClick}
            className={`icon ${rotate ? "rotate" : ""}`}
          />
        </AccordionRight>
      </AccordionHeader>
    ),
    content: <> {/* CODE */} </>
  }
];

const ProjectsPage = () => {
  const [rotate, setRotate] = useState(false);

  const handleClick = () => {
    setRotate(!rotate);
  };
  return (
    <>
      {services.map((services, index) => (
        <>
          <Accordion
            key={index}
            title={services.title}
            content={services.content}
          />
          <HrLine />
        </>
      ))}
    </>
  );
};

export default ProjectsPage;

错误截图：

错误原因 #

services数组定义在ProjectsPage组件外部，而handleClick函数和rotate状态都是组件内部的局部变量，外部的数组无法访问这些内部成员，导致渲染时触发未定义错误。

修复方案 #

方案一：将services数组移到组件内部 #

把数组放到组件函数内部，让它能直接访问组件内的状态和函数：

const ProjectsPage = () => {
  const [rotate, setRotate] = useState(false);

  const handleClick = () => {
    setRotate(!rotate);
  };

  // 将数组移至组件内部
  const services = [
    {
      title: (
        <AccordionHeader>
          <AccordionLeft>
            <span>01</span>
          </AccordionLeft>
          <AccordionRight className="icon-container">
            <p>Project Name</p>
            <BsArrowRight
              onClick={handleClick}
              className={`icon ${rotate ? "rotate" : ""}`}
            />
          </AccordionRight>
        </AccordionHeader>
      ),
      content: <> {/* CODE */} </>
    }
  ];

  return (
    <>
      {services.map((service, index) => (
        <>
          <Accordion
            key={index}
            title={service.title}
            content={service.content}
          />
          <HrLine />
        </>
      ))}
    </>
  );
};

export default ProjectsPage;

方案二：将title改为参数化函数（适用于数组需外部复用场景） #

如果services数组需要放在组件外部复用，可以把title定义为接收参数的函数，在组件渲染时传入handleClick和rotate：

// 外部定义数组，title为函数
const services = [
  {
    title: (handleClick, rotate) => (
      <AccordionHeader>
        <AccordionLeft>
          <span>01</span>
        </AccordionLeft>
        <AccordionRight className="icon-container">
          <p>Project Name</p>
          <BsArrowRight
            onClick={handleClick}
            className={`icon ${rotate ? "rotate" : ""}`}
          />
        </AccordionRight>
      </AccordionHeader>
    ),
    content: <> {/* CODE */} </>
  }
];

const ProjectsPage = () => {
  const [rotate, setRotate] = useState(false);

  const handleClick = () => {
    setRotate(!rotate);
  };

  return (
    <>
      {services.map((service, index) => (
        <>
          <Accordion
            key={index}
            // 调用title函数并传入所需参数
            title={service.title(handleClick, rotate)}
            content={service.content}
          />
          <HrLine />
        </>
      ))}
    </>
  );
};

export default ProjectsPage;

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