React点击ProjectCard报错：setOpenModal is not a function

下面是几种最可能导致这个错误的原因及修复方案：

1. Props传递时命名/拼写错误 #

大小写、变量名拼写不一致是最常见的问题。比如在某个环节把setOpenModal写成了setopenModal、SetOpenModal或者其他变体，导致最终ProjectCard拿到的不是函数而是undefined。

错误示例：
App.js传递正确，但Work组件解构时拼写错误：

// App.js
const [openModal, setOpenModal] = useState(false);
<Work openModal={openModal} setOpenModal={setOpenModal} />

// Work.jsx - 错误：把setOpenModal写成setopenModal
const Work = ({ openModal, setopenModal }) => {
  return <ProjectCard openModal={openModal} setOpenModal={setopenModal} />;
};

修复方案：
确保所有环节的变量名完全一致：

// Work.jsx - 正确
const Work = ({ openModal, setOpenModal }) => {
  return <ProjectCard openModal={openModal} setOpenModal={setOpenModal} />;
};

2. Props传递顺序搞反 #

如果把状态值和更新函数的传递顺序弄反，会导致ProjectCard拿到的setOpenModal是布尔类型的状态值，而非函数，调用自然报错。

错误示例：
App.js中传递顺序颠倒：

// App.js - 错误：把setOpenModal和openModal传反了
<Work setOpenModal={openModal} openModal={setOpenModal} />

修复方案：
严格按照定义的顺序传递props：

// App.js - 正确
<Work openModal={openModal} setOpenModal={setOpenModal} />

3. ProjectCard组件未正确解构props #

如果ProjectCard没有用对象解构接收props，而是把props当成单个参数处理，会导致setOpenModal被当成undefined。

错误示例：

// ProjectCard.jsx - 错误：没有解构props
const ProjectCard = (openModal, setOpenModal) => {
  // 这里openModal是props对象，setOpenModal是undefined
  return <button onClick={() => setOpenModal(true)}>打开模态框</button>;
};

修复方案：
用对象解构或者从props对象中取值：

// 方式1：对象解构
const ProjectCard = ({ openModal, setOpenModal }) => {
  return <button onClick={() => setOpenModal(true)}>打开模态框</button>;
};

// 方式2：从props对象中取值
const ProjectCard = (props) => {
  return <button onClick={() => props.setOpenModal(true)}>打开模态框</button>;
};

4. Work组件未正确转发props #

如果Work组件没有把从App接收到的setOpenModal传递给ProjectCard，而是自己定义了同名变量或者漏传，也会导致错误。

错误示例：
Work组件漏传setOpenModal：

// Work.jsx - 错误：只传了openModal，没传setOpenModal
const Work = ({ openModal, setOpenModal }) => {
  return <ProjectCard openModal={openModal} />;
};

修复方案：
确保把setOpenModal转发给ProjectCard：

// Work.jsx - 正确
const Work = ({ openModal, setOpenModal }) => {
  return <ProjectCard openModal={openModal} setOpenModal={setOpenModal} />;
};

额外检查点 #

• 确认所有组件的props传递链路完整，没有中途丢失
• 可以在每个组件中用console.log打印接收的props，比如在ProjectCard中打印console.log(setOpenModal)，看是否是函数类型

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