如何解决React-renderProps函数上的useCallback抛出错误
我正在props中传递renderProps函数。我想用useCallback包装它,所以优化的子组件将不会在函数创建时重新呈现。
当使用useCallback包装函数时,出现此错误:
无效的挂钩调用。挂钩只能在主体内部使用 功能组件。可能发生以下情况之一 原因:
- 您可能使用了不匹配的React和渲染器版本(例如React DOM)
- 您可能正在违反挂钩规则
- 您可能在同一应用中拥有多个React副本
以上情况均不适用于我的情况。
renderCell = React.useCallback((
{
events,popperPlacement,popperStyle,time
}
) => {
const { localeToggle } = this.state;
const { weekStarter,isTimeShown } = this.props;
const eventsListPopperStyle = utils.isWeekFirst(time,weekStarter) ||
utils.isWeekSecond(time,weekStarter) ? { left: '-17% !important' } : { left: '17% !important' };
return (
<MonthlyCell
events={events}
isTimeShown={isTimeShown}
popperPlacement={popperPlacement}
popperStyle={popperStyle}
time={time}
eventsListPopperStyle={eventsListPopperStyle}
/>
)
},[])
解决方法
由于钩子在类组件内部不起作用,因此引发了错误。 通过为React.memo提供第二个参数,我设法找到了解决方法。在我提供的函数中,我比较了prevProps和nextProps,当prop是函数时,我无视它并返回true。 可能不适用于每个人,因为有时功能会发生更改,但是对于并非如此的情况,这没关系。
SELECT
d.dept_name,COUNT(d.id) AS cnt,FROM
dept_tab d
LEFT JOIN empt_tab e
ON e.dept_id = d.dept_id
GROUP BY d.dept_name ;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。