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报错之Expected an assignment or function call and instead saw an expression
正文从这开始~ 总览 当我们忘记从函数中返回值时,会产生"Expected an assignment or function call and instead saw an express ...
- 读取导入csv csv报错iterable expected, not float
示例代码import pandas as pdimport reimport csv data = pd.read_csv('nuojia.csv', encoding='utf-8')# print ...
- react 报错的堆栈处理
react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...
- selenium调用Firefox和Chrome需要注意的一些问题,和出现的报错selenium:expected [object undefined] undefined to be a string
在高版本selenium下如:selenium3.4.3 1.高版本的selenium需要浏览器安装一些补丁驱动 Firefox:geckodriver 下载网址:http://download.cs ...
- 前端控制台 JavaScript函数报错 SyntaxError: expected expression, got ';' SyntaxError: expected expression, got 'if'
在火狐浏览器下调试时, 页面报错SyntaxError: expected expression, got ';'或者SyntaxError: expected expression, got 'if ...
- JavaScript函数报错SyntaxError: expected expression, got ';'
故事背景:编写Javaweb项目,在火狐浏览器下运行时firebug报错SyntaxError: expected expression, got ';'或者SyntaxError: expected ...
- jquery3.1.1报错Uncaught TypeError: a.indexOf is not a function
jquery3.1.1报错Uncaught TypeError: a.indexOf is not a function 使用1.9就没有问题,解决办法: 就是把写的代码中: $(window).lo ...
- jQuery3.0+报错Uncaught TypeError: e.indexOf is not a function
jQuery3.0+报错Uncaught TypeError: e.indexOf is not a function 使用.load()绑定事件时报错,Uncaught TypeError: e.i ...
- spring加载bean报错:expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {}
看具体报错日志: 警告: Unable to proxy interface-implementing method [public final void cn.wlf.selection.proto ...
随机推荐
- 论文阅读 Dynamic Network Embedding by Modeling Triadic Closure Process
3 Dynamic Network Embedding by Modeling Triadic Closure Process link:https://scholar.google.com.sg/s ...
- Kubernetes client-go 源码分析 - ListWatcher
概述ListWatch 对象的创建GetterListWatchList() & Watch() 概述 源码版本信息 Project: kubernetes Branch: master La ...
- Mac Book安装Windows发烫的问题
Mac Book安装Windows后,电脑发烫,风扇一直高速旋转.针对此问题百度搜索了一下, 大多数人说更改电源选项,由"平衡"模式改为"节能"模式,亲身体验了 ...
- vue根据后端菜单自动生成路由(动态路由)
vue根据后端菜单自动生成路由(动态路由) router.js import Vue from 'vue' import Router from 'vue-router' import store f ...
- vue华视电子身份证阅读器的使用
ie还是谷歌都是可以用的 只需要直接启用华视电子身份证阅读器的服务来的,至于服务已经上传到了网上 华视阅读器服务,下载下来解压,找到对应的华视电子读卡服务.exe文件,路径是CVR-1 ...
- DAST 黑盒漏洞扫描器 第三篇:无害化
0X01 前言 甲方扫描器其中一个很重要的功能重点,就是无害化,目的是尽量降低业务影响到可接受程度. 做过甲方扫描器,基本上对于反馈都有所熟悉. "我们的服务有大量报错,请问和你们有关么&q ...
- 2.shell脚本99乘法表
shell脚本99乘法表 [root@localhost data]# vim cf.sh
- VisionPro · C# · 图像显示十字光标
程序通过 CogRecordDisplay 显示控件显示视觉运行结果图像,当我们对调试时,可能需要用到图像中心十字对位光标. 本文通过VisionPro两个拟合线工具,一个拟合圆工具在图像中画出光标, ...
- 告别单调,Django后台主页改造 - 使用AdminLTE组件
前言 之前我做了个Django的项目,为了让管理后台更加美观,我对Django(应该说是SimpleUI的)默认的Admin后台主页进行改造,具体可以看这篇文章:项目完成 - 基于Django3.x版 ...
- bat-Office激活命令
激活命令 cd C:\Program Files\Microsoft Office\Office16 //然后目录对的话,该目录下面应该有个 OSPP.VBS cscript ospp.vbs /ds ...