React嵌套子组件中setIsOpen报不是函数的原因与解决方法

问题根源 #

React组件接收的参数是一个完整的props对象，不是拆分的单个属性。你在Card和CloseBtn组件里把setIsOpen、isOpen作为独立参数写，会导致：

• 第一个参数实际是整个props对象，不是你要的setIsOpen函数
• 第二个参数直接是undefined
  传递到孙组件后，setIsOpen自然不是函数，触发报错。

修复代码 #

只需要给组件参数加上解构语法，把props里的属性拆出来用：

修复Card组件 #

import React from "react";

const Card = ({ setIsOpen, isOpen }) => {
  return (
    <section className="cards">
      <CloseBtn setIsOpen={setIsOpen} isOpen={isOpen} />
      <div className="cards-content webdesign-content">
        <WebIntro />
        <SkillSection />
        <Seo />
      </div>
    </section>
  );
};

export default Card;

修复CloseBtn组件 #

import React from "react";

const CloseBtn = ({ setIsOpen, isOpen }) => {
  // 注意：补充buttonClassArr的定义，替换成你实际需要的CSS类名
  const buttonClassArr = "your-button-class";
  return (
    <>
      <button
        onClick={() => {
          console.log(!isOpen);
          setIsOpen(!isOpen);
        }}
        className={buttonClassArr}
      >
        <i>Close</i>
      </button>
    </>
  );
};

export default CloseBtn;

额外提醒：原CloseBtn代码里的buttonClassArr没有定义，修复时记得补充实际的类名，不然会触发新的变量未定义错误。

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