React实现导航栏唤起登录弹窗报错setOpenModal is not a function如何解决

报错根因 #

TypeError: setOpenModal is not a function 报错的核心是 Login 组件接收到的 setOpenModal 不是函数类型，常见触发场景有两个：

1. 项目中存在其他调用 Login 组件的位置，没有传入 setOpenModal 属性
2. 导入 Login 组件的路径错误，实际渲染的不是当前编写的这个Login组件

修复步骤 #

• 给Login组件的props添加默认兜底函数，避免漏传属性时直接报错：

// 修改Login组件的参数定义
function Login({ setOpenModal = () => {} }) {
  // 原有代码逻辑保持不变
}

• 全局排查所有调用<Login />的代码，确保每个调用位置都传入了有效的setOpenModal函数属性，你当前在Navbar中写的传参逻辑是正确的。
• 可以临时在Login组件顶部打印props，确认传参是否正常：

function Login(props) {
  console.log('Login接收的props：', props)
  const { setOpenModal } = props
  // 原有代码逻辑保持不变
}

• 优化所有button的type属性，避免表单默认提交导致页面刷新、状态异常：
  • 导航栏的搜索按钮如果不需要页面跳转提交，添加阻止默认行为的逻辑：

  <button className="btn-search" onClick={e => e.preventDefault()}>Search</button>
  

  • Login组件内的关闭按钮明确指定type为button，避免触发表单提交：

  <button type="button" onClick={hideModal}>&times;</button>
  

  • 所有非表单提交用途的button都加上type="button"属性。

其他规范修正 #

你当前代码还有两处不符合React语法规范的问题，建议一并修改：

1. React中指定元素类名要使用className属性，不要用原生的class：
   • 原<i class="fas fa-hamburger"></i>改为<i className="fas fa-hamburger"></i>
   • 原<button type="submit" class="btn-signup">改为<button type="submit" className="btn-signup">
2. label标签的for属性在React中要写成htmlFor：
   • 原<label for="name">Name:</label>改为<label htmlFor="name">Name:</label>，其余label标签同理修改。

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