关于react.js:React报错之Expected-onClick-listener-to-be-a-function

注释从这开始~

总览

当咱们为元素的 onClick 属性传递一个值，然而该值却不是函数时，会产生 ”Expected onClick listener to be a function” 报错。为了解决该报错，请确保只为元素的 onClick 属性传递函数。

这里有个例子来展现谬误是如何产生的。

// App.js
const App = () => {
  // ⛔️ Warning: Expected `onClick` listener to be a function
  // instead got a value of `string` type.
  return (
    <div>
      <button onClick="console.log('Click')">Click</button>
    </div>
  );
};

export default App;

当按钮的 onClick 属性的期望值是函数时，咱们为其传递了一个字符串，从而导致了谬误的产生。

传递函数

为了解决该报错，请确保只为元素的 onClick 属性传递函数。

// App.js
const App = () => {const handleClick = () => {console.log('button clicked');
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};

export default App;

咱们向元素的 onClick 属性传递了一个函数，顺利的解决了这个谬误。然而，留神到咱们在向 onClick 属性传递函数时并没有调用该函数。

咱们传递了函数的援用，而不是函数调用的后果。

如果传递了函数调用的后果，那么事件处理器将在页面加载时立刻被调用，这不是咱们想要的。

传递参数

你通常须要做的事件是向事件处理器传递一个参数。你能够通过应用一个内联箭头函数来做到这一点。

// App.js
import {useState} from 'react';

const App = () => {const [count, setCount] = useState(0);

  const handleClick = (event, num) => {console.log(event.target);
    console.log('button clicked');
    setCount(count + num);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={event => handleClick(event, 100)}>Click</button>
    </div>
  );
};

export default App;

handleClick函数是用 event 对象和一个数字参数调用的。须要留神的是，咱们没有向 onClick 属性传递调用 handleClick 函数的后果。

咱们实际上是将一个函数传递给它，该函数以 event 对象为参数，并返回以 event 和数字 100 为参数的 handleClick 函数的调用后果。

不要把调用 handleClick 函数的后果传递给 onClick 属性，这是十分重要的。因为如若这样的话，当页面加载时，该函数会被立刻调用，这可能会导致有限的从新渲染循环。