React项目Dark按钮切换主题报错：setDarkTheme is not a function

可能的原因及修复方案 #

1. 检查是否在其他位置未正确传递Props渲染Navbar #

你在App.js里给Navbar传递了darkTheme和setDarkTheme，但如果项目里其他组件（比如Routes下的某个页面）也直接渲染了Navbar，却没传这两个Props，就会触发这个错误。

修复方式：

• 要么确保所有渲染Navbar的地方都正确传递darkTheme和setDarkTheme；
• 要么给Navbar的Props设置默认值，避免未传值时出错：

// Navbar.js
const Navbar = ({ darkTheme = false, setDarkTheme = () => {} }) => {
  // 原有组件代码不变
}

2. 排查Props拼写错误 #

虽然你提供的代码里拼写没问题，但实际开发中容易出现大小写或拼写失误（比如写成SetDarkTheme或setdarkTheme）。

修复方式：
确认App.js中传递的Props名称，和Navbar.js里解构的名称完全一致——都是darkTheme和setDarkTheme。

3. 确认状态初始化逻辑正确 #

检查App.js里的useState调用是否正确，确保状态更新函数被正确解构：

// App.js 中这行代码必须无误
const [darkTheme, setDarkTheme] = useState(false);

额外优化建议 #

可以给Navbar添加PropTypes类型检查，提前发现Props传递问题：

// Navbar.js 顶部导入PropTypes
import PropTypes from 'prop-types';

// 组件末尾添加类型校验
Navbar.propTypes = {
  darkTheme: PropTypes.bool.isRequired,
  setDarkTheme: PropTypes.func.isRequired,
};

验证修复 #

修改完成后重启项目，点击主题切换按钮，确认错误消失，暗黑主题能正常切换。

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