在嵌套函数中使用钩子

时间:2019-06-04 10:45:24

标签: reactjs react-hooks

我正在尝试将React类组件重写为基于函数的基于Hook的组件,但是我不知道该怎么做。组件逻辑和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以使其与钩子一起使用?

1 个答案:

答案 0 :(得分:1)

从文档中,

useEffect是错误的挂钩:

  

如果您熟悉React类的生命周期方法,可以将useEffect Hook视为componentDidMountcomponentDidUpdatecomponentWillUnmount的组合。

在您的示例中,您需要控制何时调用代码,例如在按钮上单击。我想说useCallback是这里最合适的钩子:

const onClearSearchbox = useCallback(() => {
  setMenuItemsFullList(props.items);
}, [props.items]);
...
<SearchBox onClear={onClearSearchBox} ... />