Использование хуков во вложенных функциях
Я пытаюсь переписать компонент класса 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 в качестве внутренней функции также не работает.
Сообщение об ошибке, которое я получаю:
Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component...
Я считаю, что мое мышление все еще привязано к структуре, основанной на классах, так как я не могу понять, как я буду заниматься рефакторингом LeftPanel. Как мне провести рефакторинг _onClearSearchBox, чтобы он работал с хуками?
Да, в этом весь смысл поста. Пожалуйста, прочитайте, что я на самом деле пишу
вы не можете вызывать хуки внутри метода или функции внутри компонента, они должны быть объявлены на верхнем уровне.
Да, я знаю. Но компонент Searchbox требует использования функции, когда пользователь нажимает на метку X. Я должен накормить его функцией. А раньше эта функция была просто setState, которая сбрасывала список элементов. Это не работает с хуками
Ответы 1
использованиеЭффект - неправильный хук для этого из документов:
If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as
componentDidMount,componentDidUpdate, andcomponentWillUnmountcombined.
В вашем примере вам нужен контроль над тем, когда вы хотите вызвать код, например. по нажатию кнопки. Я бы сказал, что использоватьОбратный звонок будет здесь наиболее подходящим хуком:
const onClearSearchbox = useCallback(() => {
setMenuItemsFullList(props.items);
}, [props.items]);
...
<SearchBox onClear = {onClearSearchBox} ... />
Вы не можете использовать хуки внутри компонента класса, вместо этого используйте функциональный компонент.