快捷導(dǎo)航

解決React報(bào)錯(cuò)Expected?`onClick`?listener?to?be?a?function

更新時(shí)間：2022年12月02日 11:28:49 作者：Borislav?Hadzhiev

這篇文章主要為大家介紹了React報(bào)錯(cuò)Expected?`onClick`?listener?to?be?a?function解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們?yōu)樵氐?code>onClick屬性傳遞一個(gè)值，但是該值卻不是函數(shù)時(shí)，會(huì)產(chǎn)生"Expected onClick listener to be a function"報(bào)錯(cuò)。為了解決該報(bào)錯(cuò)，請(qǐng)確保只為元素的onClick屬性傳遞函數(shù)。

這里有個(gè)例子來展示錯(cuò)誤是如何發(fā)生的。

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

當(dāng)按鈕的onClick屬性的期望值是函數(shù)時(shí)，我們?yōu)槠鋫鬟f了一個(gè)字符串，從而導(dǎo)致了錯(cuò)誤的產(chǎn)生。

傳遞函數(shù)

為了解決該報(bào)錯(cuò)，請(qǐng)確保只為元素的onClick屬性傳遞函數(shù)。

// App.js
const App = () => {
  const handleClick = () => {
    console.log('button clicked');
  };
  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};
export default App;

我們向元素的onClick屬性傳遞了一個(gè)函數(shù)，順利的解決了這個(gè)錯(cuò)誤。然而，注意到我們?cè)谙?code>onClick屬性傳遞函數(shù)時(shí)并沒有調(diào)用該函數(shù)。

我們傳遞了函數(shù)的引用，而不是函數(shù)調(diào)用的結(jié)果。

如果傳遞了函數(shù)調(diào)用的結(jié)果，那么事件處理器將在頁面加載時(shí)立即被調(diào)用，這不是我們想要的。

傳遞參數(shù)

你通常需要做的事情是向事件處理器傳遞一個(gè)參數(shù)。你可以通過使用一個(gè)內(nèi)聯(lián)箭頭函數(shù)來做到這一點(diǎn)。

// 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函數(shù)是用event對(duì)象和一個(gè)數(shù)字參數(shù)調(diào)用的。需要注意的是，我們沒有向onClick屬性傳遞調(diào)用handleClick函數(shù)的結(jié)果。

我們實(shí)際上是將一個(gè)函數(shù)傳遞給它，該函數(shù)以event對(duì)象為參數(shù)，并返回以event和數(shù)字100為參數(shù)的handleClick函數(shù)的調(diào)用結(jié)果。

不要把調(diào)用handleClick函數(shù)的結(jié)果傳遞給onClick屬性，這是非常重要的。因?yàn)槿缛暨@樣的話，當(dāng)頁面加載時(shí)，該函數(shù)會(huì)被立即調(diào)用，這可能會(huì)導(dǎo)致無限的重新渲染循環(huán)。

以上就是解決React報(bào)錯(cuò)Expected `onClick` listener to be a function的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)onClick function的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: