正文从这开始~

总览

当我们为元素的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. 字节开源RPC框架Kitex的日志库klog源码解读

    前言 这篇文章将着重于分析字节跳动开源的RPC框架Kitex的日志库klog的源码,通过对比Go原生日志库log的实现,探究其作出的改进. 为了平滑学习曲线,我写下了这篇分析Go原生log库的文章,希 ...

  2. bare Git 仓库是什么?

    背景 今天,坐我旁边的同事问我一些关于服务器上命令的问题.其中有一个用了特殊参数的 git init 的命令,我也不认识,遂去 Google... bare Git 仓库 定义 A bare Git ...

  3. CSP J/S 初赛总结

    CSP J/S 初赛总结 2021/9/19 19:29 用官方答案估计 J 涂卡的时候唯一的一支 2B 铅笔坏了,只能用笔芯一个个涂 选择 \(-6\ pts\) 判断 \(-3\ pts\) 回答 ...

  4. 给王心凌打Call的,原来是神奇的智能湖仓

    图文原创:谭婧(王凌老粉) "爷青回" "我们只是老了,并没有死." 谭老师作为老粉,热烈庆祝"甜心教主"王凌成为现象级翻红顶流. 只要地球 ...

  5. Git镜像

    http://npm.taobao.org/mirrors/git-for-windows/v2.34.1.windows.1/ Git 阿里镜像,高速 下载

  6. React与Koa一起打造一个功能丰富的全栈个人博客(业务篇)

    前言 豆哥的个人博客又改版了,本版主要技术栈是前台用的React,后台用的Koa.博客改版的初衷是自己可以练练React(公司的项目部分要用React,我也没法啊,再说早晚得学).本文主要介绍博客的业 ...

  7. Leetcode----<Re-Space LCCI>

    题解如下: /** * 动态规划解法: * dp[i] 表示 0-i的最小不能被识别的字母个数 * 求 dp[k] 如果第K个字母 不能和前面的字母[0-{k-1}]合在一起被识别 那么dp[k] = ...

  8. 面试突击62:group by 有哪些注意事项?

    注意:本文以下内容基于 MySQL 5.7 InnoDB 数据库引擎. 1.group by 后面不能加 where 在 MySQL 中,所有的 SQL 查询语法要遵循以下语法顺序: select f ...

  9. Tapdata 与阿里云 PolarDB 开源数据库社区联合共建开放数据技术生态

      近日,阿里云 PolarDB 开源数据库社区宣布将与 Tapdata 联合共建开放数据技术生态.在此之际,一直专注实时数据服务平台的 Tapdata ,也宣布开源其数据源开发框架--PDK(Plu ...

  10. Tapdata 在线研讨会:DaaS vs 大数据平台,是竞争还是共处?

    从20年前的传统数仓,到10年前大数据平台,5年前开始火热的数据中台以及最近出现的湖仓一体新数据平台,今天被数据孤岛困扰的企业,面临着太多的选择.这些数据产品及架构有一个共性:他们本质上解决的大部分都 ...