迹忆客 专注技术分享

当我们将不是函数的值传递给元素的 onClick 属性时，会出现错误“Expected onClick listener to be a function”。 要解决该错误，请确保仅将函数传递给元素的 onClick 属性。

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 属性。

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

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

export default App;

我们将一个函数传递给元素的 onClick 属性，它解决了错误。 但是，请注意，我们在将函数传递给 prop 时并未调用该函数。

我们传递的是对函数的引用，而不是调用函数的结果。

如果传递调用函数的结果，那么事件处理程序将在页面加载时立即被调用，这不是我们想要的。

我们必须做的一件常见事情是将参数传递给事件处理程序。 我们可以使用内联箭头函数来做到这一点。

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 函数。

请注意 ，我们没有将调用 handleClick 函数的结果传递给 onClick 道具。

我们实际上向它传递了一个函数，该函数将事件对象作为参数并返回以事件和数字 100 作为参数调用 handleClick 函数的结果。

非常重要的是不要将调用 handleClick 函数的结果传递给 onClick 属性，因为该函数会在页面加载时立即被调用，这可能会导致无限重新渲染循环。

总结

当我们将不是函数的值传递给元素的 onClick 属性时，会出现错误“Expected onClick listener to be a function”。 要解决该错误，需要确保仅将函数传递给元素的 onClick 属性。