正文从这开始~
总览
当我们为元素的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 ();
};
export default App;
当按钮的
onClick
属性的期望值是函数时,我们为其传递了一个字符串,从而导致了错误的产生。传递函数 为了解决该报错,请确保只为元素的
onClick
属性传递函数。// App.js
const App = () => {
const handleClick = () => {
console.log('button clicked');
};
return ();
};
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 ({count}
);
};
export default App;
handleClick
函数是用event
对象和一个数字参数调用的。需要注意的是,我们没有向onClick
属性传递调用handleClick
函数的结果。我们实际上是将一个函数传递给它,该函数以
event
对象为参数,并返回以event
和数字100
为参数的handleClick
函数的调用结果。文章图片
【React报错之Expected `onClick` listener to be a function】不要把调用
handleClick
函数的结果传递给onClick
属性,这是非常重要的。因为如若这样的话,当页面加载时,该函数会被立即调用,这可能会导致无限的重新渲染循环。推荐阅读
- React报错之Type '() => JSX.Element[]' is not assignable
- React报错之JSX element type does not have any construct
- react.js|React Router V6实现嵌套路由重定向
- React|react-router之路由重定向
- 工作-React|2022-06-29 工作记录--React-函数式组件 useState的使用 + useEffect的使用 + 监听事件的使用
- 学习|React组件基础
- React报错之Cannot find namespace context
- React Hooks 学习
- React报错之Functions are not valid as a React child