解决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属性，这是非常重要的。因为如若这样的话，当页面加载时，该函数会被立即调用，这可能会导致无限的重新渲染循环。
以上就是解决React报错Expected `onClick` listener to be a function的详细内容，更多关于React报错onClick function的资料请关注脚本之家其它相关文章！
相关文章
React需要自己开发支持插槽功能，原理：父组件组件中写入的HTML，可以传入子组件的props中，这篇文章主要介绍了React从插槽、路由、redux的详细过程,需要的朋友可以参考下2022-10-10
在React日常开发中，我们常常被重复渲染或无意义渲染所折磨，穷尽脑汁，做各种优化：memo、useMemo、useCallback、immutable等，本文主要讲述immutable的简约版Immer，感兴趣的同学可以一起来学习2023-05-05
本篇文章主要介绍了React-router 4 按需加载的实现方式及原理详解，非常具有实用价值，需要的朋友可以参考下2017-05-05
再次谈论React.js实现原生js拖拽效果引起的一系列问题
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站.本文给大家介绍React.js实现原生js拖拽效果，需要的朋友一起学习吧2016-04-04
React 使用browserHistory项目访问404问题解决
这篇文章主要介绍了React 使用browserHistory项目访问404问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法，需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了React 开发中遇到的具名插槽的函数用法,文中的示例代码讲解详细,具有一定的学习价值,有兴趣的小伙伴可以了解一下2023-11-11
在React中,state 是一个用于存储组件内部数据的特殊对象,每个React组件都可以包含自己的state,我们往往是通过修改state的值来驱动React重新渲染组件,这篇文章主要介绍了React中state属性,需要的朋友可以参考下2023-11-11
本文主要介绍了react中antd Upload手动上传的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了使用Ant Design Anchor组件的一个坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
最新评论