正文从这开始~

总览

当我们为元素的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的更多相关文章

  1. 读取导入csv csv报错iterable expected, not float

    示例代码import pandas as pdimport reimport csv data = pd.read_csv('nuojia.csv', encoding='utf-8')# print ...

  2. react 报错的堆栈处理

    react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...

  3. selenium调用Firefox和Chrome需要注意的一些问题,和出现的报错selenium:expected [object undefined] undefined to be a string

    在高版本selenium下如:selenium3.4.3 1.高版本的selenium需要浏览器安装一些补丁驱动 Firefox:geckodriver 下载网址:http://download.cs ...

  4. 前端控制台 JavaScript函数报错 SyntaxError: expected expression, got ';' SyntaxError: expected expression, got 'if'

    在火狐浏览器下调试时, 页面报错SyntaxError: expected expression, got ';'或者SyntaxError: expected expression, got 'if ...

  5. JavaScript函数报错SyntaxError: expected expression, got ';'

    故事背景:编写Javaweb项目,在火狐浏览器下运行时firebug报错SyntaxError: expected expression, got ';'或者SyntaxError: expected ...

  6. 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 ...

  7. 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 ...

  8. 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 ...

  9. react报错 TypeError: Cannot read property 'setState' of undefined

    代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false ...

  10. [java报错]Could not instantiate listener XXXXXX

    写在开头的话: 兜兜转转,辞去了深圳的工作,回到了武汉,从事的居然一度是我最不想学的语言-java,曾经以为自己并不会java,但是上手之后,发现语言都是相通的,自己一度排斥学习java真的是不能再傻 ...

随机推荐

  1. spark 加载文件

    spark 加载文件 textFile的参数是一个path,这个path可以是: 1. 一个文件路径,这时候只装载指定的文件 2. 一个目录路径,这时候只装载指定目录下面的所有文件(不包括子目录下面的 ...

  2. js如何判断一个对象是不是Array

    typeof 操作符 对于Function, String, Number ,Undefined 等几种类型的对象来说,他完全可以胜任,但是为Array时 var arr=new Array(&quo ...

  3. 关于T公司的强矩阵架构的思考

    我所在的T公司是强矩阵架构,关于这类公司,应该是不少大公司的主流架构,也就是说一个职员在公司内不仅在项目内有相应的级别,在其行政上也是有相应的级别,日常工作以项目的内容为主,但是同时也是属于行政的一员 ...

  4. 在线程中进行读取并写入文件和wenjia

    新人求(胸)罩!!! import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException ...

  5. Demo_塔防(自动生成怪物,导航,炮塔攻击,怪物掉血死忙)

    using UnityEngine; using System.Collections; public struct WaveMsg { //该波次生成的怪物 public GameObject mo ...

  6. chromium for android v34 2dcanvas硬件渲染实现分析

    这篇接着上一篇2dcanvas硬件绘制,分析保存绘制结果的texture被合成到on screen framebuffer上的过程. 1.webkit为canvas元素相应的render树节点Rend ...

  7. SSH HTTP代理

    SSH 连接 参照https://stackoverflow.com/questions/19161960/connect-with-ssh-through-a-proxy 若要使用goflyway连 ...

  8. Python从入门到精通之Second!

    初识Python基础! -基础     -扩展名可以是任意的,但是导入模块时,如果不是.py文件就会报错. -两种执行方式      1.python解释器       文件名.py 文件路径 -Li ...

  9. html介绍和head标签

      一.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构:html.表 ...

  10. Objective-C:NSMutableString类的常见操作

    NSMutableString可变字符串的主要的操作是创建.增加.删除.插入.替换 代码操作如下: // // main.m // 03-NSMutableString // // Created b ...