Javascript 未捕获错误：预期`onClick`侦听器是一个函数，但得到了`object`类型的值。反应

今天早些时候，我的代码出现了一些问题。每当加载DOM或我单击有问题的按钮时，控制台中会记录一个错误“未捕获错误：预期

onClick

listener成为函数，而不是获得

object

type”的值。”

我真的不明白，因为onClick实际上是函数，但我得到了错误消息

//Header.jsx
function Header(onMetric, toggleMetric) {
    const toggleStyle = { display: "flex" };

    console.log(toggleMetric);  //logs an empty object to the console

    return (
        <div className="container">
            <h1>BMI Calculator</h1>
            <div style={toggleStyle}>
                <div className="toggle-container" onClick={toggleMetric}>
                    <div className={`dialog-button ${onMetric ? "" : "disabled"}`}>
                        {onMetric ? (
                            <div style={{ height: "16px" }}></div>
                        ) : (
                            <div style={{ height: "16px" }}></div>
                        )}
                    </div>

//Header.jsx
函数头（onMetric、toggleMetric）{
const-toggleStyle={display:“flex”}；
console.log（toggleMetric）；//将空对象记录到控制台
返回(
体重指数计算器
{onMetric(
) : (
)}

下面是App.js组件：

//App.js

function App() {
    const [onMetric, setOnMetric] = useState(true);

    const toggleMetric = () => {
        setOnMetric(!onMetric);
    };

    return (
            <div className="container">
                <Header onMetric={onMetric} toggleMetric={toggleMetric} />

//App.js
函数App（）{
const[onMetric，setOnMetric]=useState（true）；
常量toggleMetric=（）=>{
setOnMetric（！onMetric）；
};
返回(

同样，重构相同的代码并将切换逻辑放在它自己的另一个组件中不会返回该错误。我也可以使用它，但我想知道为什么会首先抛出该错误，这是可以教的

//ToggleButton.jsx
function ToggleButton({ toggleMetric, onMetric }) {
    const toggleStyle = { display: "flex" };

    console.log(toggleMetric); //logs the actual function from App.js to the console

    return (
        <div className="container" style={toggleStyle}>
            <div className="toggle-container" onClick={toggleMetric}>
                <div className={`dialog-button ${onMetric ? "" : "disabled"}`}>
                    {onMetric ? (
                        <div style={{ height: "16px" }}></div>
                    ) : (
                        <div style={{ height: "16px" }}></div>
                    )}
                </div>
            </div>

//ToggleButton.jsx
函数ToggleButton（{toggleMetric，onMetric}）{
const-toggleStyle={display:“flex”}；
log（toggleMetric）；//将实际函数从App.js记录到控制台
返回(
{onMetric(
) : (
)}

您将

Header

函数定义为包含两个参数-但它是一个React组件，其所有支柱都存在于第一个参数中，即对象中。这：

function Header(onMetric, toggleMetric) {

需要：

function Header({ onMetric, toggleMetric }) {

---

谢谢。真不敢相信我忘了解构。你会认为这是一个明显的错误。