未捕获的错误：预期 `onClick` 侦听器是一个函数，而不是 `object` 类型的值。反应JS答案

【问题标题】：Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type. ReactJS未捕获的错误：预期 `onClick` 侦听器是一个函数，而不是 `object` 类型的值。反应JS
【发布时间】：2020-12-03 18:11:21
【问题描述】：

今天早些时候我的代码出现了一些问题。每当加载 DOM 或单击相关按钮时，都会出现错误“未捕获的错误：预期 onClick 侦听器是一个函数，而不是得到 object 类型的值。”已登录到控制台。

我真的不明白，因为 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>

这里是 App.js 组件：

//App.js

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

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

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

此外，重构完全相同的代码并将 Toggle 逻辑放在它自己的另一个组件中不会返回该错误。我也可以使用它，但我想知道为什么首先抛出错误，可教的时刻等等。

//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>

【问题讨论】：

标签： javascript reactjs function object onclick

【解决方案1】：

您将 Header 函数定义为带有 2 个参数 - 但它是一个 React 组件，其道具都存在于第一个参数中，这是一个对象。这个：

function Header(onMetric, toggleMetric) {

需要：

function Header({ onMetric, toggleMetric }) {

【讨论】：

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