正文从这开始~

总览

当我们为元素的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. React报错之Expected an assignment or function call and instead saw an expression

    正文从这开始~ 总览 当我们忘记从函数中返回值时,会产生"Expected an assignment or function call and instead saw an express ...

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

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

  3. react 报错的堆栈处理

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. C++:接送旅客

    接送旅客 时间限制:1.00sec        内存限制:128MB 题目描述: 现在,你是一家酒店的员工,你需要帮助这家酒店的旅客运送行李离开酒店.现在,你送顶层开始往下移动,为了减少电梯移动的距 ...

  2. Java到底是解释型还是编译型语言

    Java到底是解释型还是编译型语言? 定义 回答这个问题,我们首先来看下概念: 开发人员编写代码,语言是人类可理解的方式,是具有语义的,然而计算机无法理解和执行,因此需要做一层转换. 解释型语言: 运 ...

  3. 原理:C++为什么一般把模板实现放入头文件

    写在前面 本文通过实例分析与讲解,解释了为什么C++一般将模板实现放在头文件中.这主要与C/C++的编译机制以及C++模板的实现原理相关,详情见正文.同时,本文给出了不将模板实现放在头文件中的解决方案 ...

  4. Thymeleaf 公共css,js提取及自有css,js导入

    https://www.jianshu.com/p/2102fa4772ba

  5. 洛谷 P2629 好消息,坏消息 题解

    暴力算法的时间复杂度是O(n^2),考虑优化: 先导入一种思想--断环为链.说通俗点就是在原数组后面再接上下标为1--(n - 1)的元素: 以样例为例:-3 5 1 2:我们将其断环为链后可以得到这 ...

  6. 浅谈倍增法求解LCA

    Luogu P3379 最近公共祖先 原题展现 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入格式 第一行包含三个正整数 \(N,M,S\),分别表示树的结点个数.询问 ...

  7. javaweb获取客户端真实ip

    在安全性要求较高的web项目中,我们经常有这样的需求: 黑名单:禁止指定ip访问. 白名单:允许指定ip访问. 根据ip追踪恶意入侵系统者. 在java中我们通常可以这样获取客户端ip地址: requ ...

  8. 合宙AIR105(四): SPI, MAX7219 8x8LED驱动

    目录 合宙AIR105(一): Keil MDK开发环境, DAP-Link 烧录和调试 合宙AIR105(二): 时钟设置和延迟函数 合宙AIR105(三): 定时器, 定时器中断和PWM输出 合宙 ...

  9. sql server 开启一个事务

    开启事务,回滚 /*============================================================== */ /* Date : 2020年11月18日 11 ...

  10. Codeforces Round #789 (Div. 2) A-C

    Codeforces Round #789 (Div. 2) A-C A 题目 https://codeforces.com/problemset/problem/1677/A 题解 思路 知识点:模 ...