React+Firebase登出按钮无法正常工作，求助排查问题

嘿，我一眼就发现问题啦——你的Hero组件接收props的方式出错了！

问题根源 #

React组件的参数本质是一个props对象，而不是直接接收单个函数。你现在写的：

const Hero = (handleLogout) => {
  // ...组件内容
}

这里的handleLogout实际上是整个props对象，不是你从App.js传过来的登出函数。当你点击按钮调用它时，相当于在调用一个对象，自然不会触发登出操作。

两种修复方案 #

方案1：解构props直接提取函数

把组件参数改成解构形式，直接拿到handleLogout：

const Hero = ({ handleLogout }) => {
return(
<section className="hero">
<nav>
<h2>Welcome</h2>
<button onClick = {handleLogout}>Log Out</button>
</nav>
<div id="contact-form">
<Contact />
</div>
</section>
)
}

方案2：通过props对象访问函数

如果不想解构，也可以通过props对象来访问传入的函数：

const Hero = (props) => {
return(
<section className="hero">
<nav>
<h2>Welcome</h2>
<button onClick = {props.handleLogout}>Log Out</button>
</nav>
<div id="contact-form">
<Contact />
</div>
</section>
)
}

额外确认 #

别忘了在App.js里渲染Hero时，要正确传递handleLogout函数：

// App.js中的渲染代码示例
<Hero handleLogout={handleLogout} />

小提示：以后遇到props相关的问题，可以在组件里加个console.log打印一下拿到的参数，比如console.log(handleLogout)，就能快速看到实际拿到的是什么，定位问题超方便~

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