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的更多相关文章

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. Vue出现Component template should ...

   当运行vue出现错误Component template should contain exactly one root element. If you ...的时候,我们只需要将<templa ...

2. java继承中关于super关键字和this关键字的使用

   1.super关键字 由于子类不能继承父类的构造方法,因此,如果要调用父类的构造方法,可以使用 super 关键字.super 可以用来访问父类的构造方法.普通方法和属性.super 关键字的功能: ...

3. 数位 dp 总结

   数位 dp 总结 特征 问你一个区间 \([L,R]\) 中符合要求的数的个数 一个简单的 trick :把答案拆成前缀和 \(Ans(R)-Ans(L-1)\) 如何求 \(Ans()\) ,就要用 ...

4. VMware虚拟机基于contos 7 搭建lnmp环境全过程

   这个环境也整了几次了,由于本人比较懒,没有记住.找资料很麻烦,就自己动手咯 1.下载VMware虚拟机   (有注册码)     地址:http://www.zdfans.com/5928.html ...

5. JS：逗号运算符

   逗号运算符: 会把逗号隔开的表达式全部执行 最后一个运行的表达式的结果就是逗号运算符的结果   例: var a = (1, 2, 3, 4, 5, 6); console.log(a); //6 隐 ...

6. MAUI与Blazor共享一套UI，媲美Flutter，实现Windows、macOS、Android、iOS、Web通用UI

   1. 前言 距离上次发<MAUI初体验:爽>一文已经过去2个月了,本计划是下半年或者明年再研究MAUI的,现在计划提前啦,因为我觉得MAUI Blazor挺有意思的:在Android.iO ...

7. 简述电动汽车的发展前景及3D个性化定制需求

   李彦宏前几天又搞事,他宣布百度要开始造电动汽车了!百度市值更是因此一夜暴涨了700亿. 这熟悉的配方,好像在乔布斯.库克那里也见过. 苹果的"iCar"(或者是Apple Car) ...

8. BUUCTF-神秘龙卷风

   神秘龙卷风 通过提示知道压缩包密码是四位纯数字,通过爆破得到 得到一串编码 看样子应该是brainfuck编码 flag{e4bbef8bdf9743f8bf5b727a9f6332a8}

9. iostat、vmstat、iftop命令详解

   1.安装iostat命令 yum install sysstat -y 用法:iostat [ 选项 ] [ <时间间隔> [ <次数> ]] 常用选项说明: -c:只显示系统 ...

10. 避坑手册 | JAVA编码中容易踩坑的十大陷阱

    JAVA编码中存在一些容易被人忽视的陷阱,稍不留神可能就会跌落其中,给项目的稳定运行埋下隐患.此外,这些陷阱也是面试的时候面试官比较喜欢问的问题. 本文对这些陷阱进行了统一的整理,让你知道应该如何避免 ...