React报TypeError: setActiveProject is not a function错误如何解决？

报错本质是父子组件传递prop时命名大小写不匹配：

• 父组件App中给ProjectList传递setter函数时，prop名写为了setactiveProject（首字母a小写）
• 子组件ProjectList解构props时，用的是setActiveProject（首字母A大写）
  大小写不一致导致子组件拿到的setActiveProject为undefined，调用undefined自然会抛出「不是一个函数」的错误。

两种修复方式任选其一即可：

1. 统一修改父组件传递的prop名
   修改App.js中给ProjectList传递的prop，把setactiveProject改为和setter函数同名的setActiveProject：

// App.js 修改后代码
const App = () => {
  const [activeProject, setActiveProject] = useState();
  return (
    <div className="app-container">
      <ProjectList
        activeProject={activeProject}
        {/* 这里把小写a改成大写A */}
        setActiveProject={setActiveProject}
      />
    </div>
  );
};

2. 子组件解构时重命名prop
   如果不修改父组件代码，也可以在子组件解构props时把传入的小写开头的prop重命名为你需要的变量名：

// ProjectList.js 修改后解构代码
const ProjectList = ({ activeProject, setactiveProject: setActiveProject }) => {
  // 其余代码保持不变
}

React的prop命名严格区分大小写，日常开发中建议传递state setter时直接和useState定义的setter函数名保持一致，就能避免这类低级错误。

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