reactjs - 在嵌套函数中使用钩子
问题描述
我正在尝试将 React 类组件重写为基于功能挂钩的组件,但我不知道该怎么做。组件逻辑和 JSX 看起来像这样:
export class LeftPanel extends React.Component<ILeftPanelProps, ILeftPanelState> {
const [menuItemsFullList, setMenuItemsFullList] = useState([{links: []}] as any[]);
useEffect(() => {
const { links } = props;
setMenuItemsFullList(links);
}, props.links);
....
return (<>
<SearchBox
onChange={_onSearch}
onClear={_onClearSearchBox}
/>
<NavList
listEntries={[menuItems]}
/>
</>)
我目前正在重写的功能是 onClearSearchBox:
private _onClearSearchBox() {
this.setState({ menuItems: { ...this.state.menuItemsFullList } });
}
我尝试使用将 setState 变成这样的钩子天真地重写它:
function onClearSearchBox() {
useEffect(() => setMenuItems(menuItemsFullList));
}
这不起作用,我不知道如何重构代码,因为我无法在非 React 组件函数中调用钩子。将其作为内部函数移动到 React 组件函数中也不起作用。
我收到的错误消息是:
未捕获的不变违规:无效的挂钩调用。钩子只能在函数组件的主体内部调用...
我相信我的思维方式仍然停留在基于类的结构上,因为我无法弄清楚我将如何进行并重构 LeftPanel。我应该如何重构 _onClearSearchBox 以使其与钩子一起使用?
解决方案
useEffect是错误的钩子,来自文档:
如果您熟悉 React 类生命周期方法,您可以将 useEffect Hook 视为
componentDidMount
,componentDidUpdate
, 和componentWillUnmount
组合。
在您的示例中,您需要控制何时要调用代码,例如单击按钮。我想说useCallback将是这里最合适的钩子:
const onClearSearchbox = useCallback(() => {
setMenuItemsFullList(props.items);
}, [props.items]);
...
<SearchBox onClear={onClearSearchBox} ... />
推荐阅读
- javascript - 为什么我的 if...else 语句不返回 false?
- json - 如何将 JSON 项转换为 int 并将它们与 Power Automate 一起添加?
- reactjs - React Material UI 自定义工具提示和快速拨号样式
- javascript - React 更新状态导致 props 发生变化
- java - 尝试将数据保存到 android 设备上的可访问文件
- amazon-web-services - 如何将 Amplify 用于在 EC2 实例上运行的 GraphQL API?
- python - 如何使用 pandas 清理多个数据
- python - 如何在保留相同编号的同时缩小图像尺寸。使用的颜色?
- python - 在 Python PuLP 中使用自定义成本函数
- angular - 如何始终以桌面视图格式导出 PDF?