hook call error: Hooks can only be called inside of the body of a function component

Question

我是 React 组件的新手，在使用 react-hooks 时出现此错误，这是我的代码，有人可以帮助我吗？这是错误的详细信息。

这可能是由于以下原因之一造成的：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
您可能违反了 Hooks 规则
您可能在同一个应用程序中拥有多个 React 副本有关如何调试和修复此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

const newParams = "params"

// eslint-disable-next-line react-hooks/rules-of-hooks
const history = useHistory();
// eslint-disable-next-line react-hooks/rules-of-hooks
const location = useLocation();


export class FullscreenDialog extends React.Component{

    constructor(props: any) {
        super(props);

        this.state = { dialogShow: false };

        this.onDismissFullscreen = this.onDismissFullscreen.bind(this);
        this.openDialogWithButton = this.openDialogWithButton.bind(this);
    }

    openDialogWithButton() {
        updateSearch({history, location, newParams})
    }

    onDismissFullscreen() {

        closeDialog({ history, location, key: 'key' })
    }

    render(){
        const uniqueDialogId3 = 'notes';

        return (
            <>
                <DialogRoute id={uniqueDialogId3}>
                    <Layer id="fullscreenDialog" >
                        <UitkFullscreenDialog ariaLabel="Demo" dialogShow={true} returnFocusOnClose={true}>
                            <UitkToolbar
                                header="Toolbar heading"
                                iconLabel="Close the dialog"
                                key="UitkToolbar"
                                type={ToolbarType.CLOSE}
                            />
                            <UitkDialogContent key="UitkDialogContent-1">
                                <UitkParagraph key="UitkDialogContentParagraph" size={2}>
                                    test
                                </UitkParagraph>
                            </UitkDialogContent>
                        </UitkFullscreenDialog>
                    </Layer>
                </DialogRoute>
                <UitkLink inline={true}>
                    <button onClick={this.openDialogWithButton}>Open Fullscreen Dialog</button>
                </UitkLink>
            </>
        );
    }
}

Answer 1

一般的经验法则是任何以“use”开头的东西都将是一个钩子，并且不会在基于 class 的组件中工作。如果你想坚持使用基于 class 的组件，你可以将组件包装在 react router dom 的 withRouter 中以访问 history prop。否则，您可以切换到如下所示的功能组件：

import React, {useState} from 'react';
const newParams = "params"

// eslint-disable-next-line react-hooks/rules-of-hooks
const history = useHistory();
// eslint-disable-next-line react-hooks/rules-of-hooks
const location = useLocation();


const FullscreenDialog = ({closeDialog, updateSearch}) => {
const [dialogShow, setDialogShow] = useState(false)

const openDialogWithButton = () => {
    updateSearch({history, location, newParams})
}

const onDismissFullscreen = () => {
    closeDialog({ history, location, key: 'key' })
}

const uniqueDialogId3 = 'notes';

return (
    <>
    <DialogRoute id={uniqueDialogId3}>
        <Layer id="fullscreenDialog" >
            <UitkFullscreenDialog ariaLabel="Demo" dialogShow={true} returnFocusOnClose={true}>
                <UitkToolbar
                    header="Toolbar heading"
                    iconLabel="Close the dialog"
                    key="UitkToolbar"
                    type={ToolbarType.CLOSE}
                />
                <UitkDialogContent key="UitkDialogContent-1">
                    <UitkParagraph key="UitkDialogContentParagraph" size={2}>
                        test
                    </UitkParagraph>
                </UitkDialogContent>
            </UitkFullscreenDialog>
        </Layer>
    </DialogRoute>
    <UitkLink inline={true}>
        <button onClick={openDialogWithButton}>Open Fullscreen Dialog</button>
    </UitkLink>
</>
)
}

hook call error: Hooks can only be called inside of the body of a function component

hook call error: Hooks can only be called inside of the body of a function component

javascript

typescript

eslint

react-hooks