Soy nuevo en el componente de reacción, obtengo este error cuando uso ganchos de reacción, aquí está mi código, ¿alguien puede ayudarme con eso? Este es el detalle del error.
Esto podría suceder por una de las siguientes razones:
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> </> ); } }Una regla general es que cualquier cosa que comience con "uso" será un gancho y no funcionará en un componente basado en clases. Puede envolver su componente con el enrutador desde reaccionar enrutador dom para acceder al accesorio de historial de esa manera si desea seguir con un componente basado en clases, verifique eso aquí . De lo contrario, puede cambiar a un componente funcional que se vería así:
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> </> ) }