0
238
ViewsNo se pueden leer las propiedades de nulo (leyendo '0'). Reaccionar
Alguien puede ayudarme con esto.
Recibo errores al ejecutar el siguiente código. No se que error estoy cometiendo. He puesto el comentario en la línea donde viene el error . Incluso una pequeña sugerencia sería muy útil.
El error está en la imagen al final.
import React from 'react'; import { Link } from 'react-router-dom'; import Auth from './auth/auth'; import { BrowserRouter, withRouter } from 'react-router-dom'; import { Security } from '@okta/okta-react'; import { oktaAuth, toRelativeUrl } from '../../../../libs/okta-auth.js'; import Routes from './routes/routes'; class App extends React.Component<any, any> { restoreOriginalUri: any; constructor(props) { super(props); try { this.restoreOriginalUri = async (_oktaAuth, originalUri) => { // *********ERROR IN THE BELOW LINE********* props.history.replace( toRelativeUrl(originalUri, window.location.origin) ); }; } catch (error) { console.log('error'); } } render() { return ( <h1> Welcome to clinical-trials!!! <br /> <hr /> <br /> <div role='navigation'> <ul> <li> <Link to='/'>Home</Link> </li> </ul> </div> <div> <Security oktaAuth={oktaAuth} restoreOriginalUri={this.restoreOriginalUri} > <Auth /> <Routes /> </Security> </div> </h1> ); } } const AppWithRouter = withRouter(App); // eslint-disable-next-line import/no-anonymous-default-export export default class extends React.Component { render() { return ( <BrowserRouter> <AppWithRouter /> </BrowserRouter> ); } } 
Que error estoy haciendo. Soy nuevo en reaccionar.
¿Se puede resolver mediante callback de llamada?
setTimeout() pero no ayudó
2 answers
Answer question0
No estoy completamente seguro de qué está causando el error, pero hay varias cosas que verificar.
props vs this.props
Al escribir componentes como una clase, tendrá esta estructura aproximada:
class Component extends React.Component { constructor(props) { super(props) } render() { return <>text that is rendered</> } } Esto sigue varios paradigmas orientados a objetos. Sin embargo, lo más notable es que los accesorios se proporcionan como un argumento para el constructor y luego se pasan a super . Dado que un componente React extiende React.Component , el super es el constructor de React.Component y asigna props a this.props .
Eso significa que en cualquier lugar de la clase, puede acceder a los accesorios con this.props .
Métodos
Dentro de su clase, ha declarado un método restoreOriginalUri .
class Component extends React.Component { restoreOriginalUri: any //… }Luego está inicializando ese método dentro del constructor. En general, es una buena práctica no hacer esto y simplemente inicializar el método en la raíz de la clase.
class Component extends React.Component { async restoreOriginalUri(_oktaAuth, originalUri) { this.props.history.replace( toRelativeUrl(originalUri, window.location.origin) ) } //… } También observe el uso de this.props .
Al seguir convenciones como esta, encontrará menos errores (como el que está experimentando ahora).
.bind(this)
Al pasar métodos a componentes como lo hace aquí, es mejor usar .bind(this) al final.
En resumen, la palabra clave this de JavaScript puede ser confusa y al pasar el método tal this , ya no se referirá al componente de la App .
<Security oktaAuth={oktaAuth} restoreOriginalUri={this.restoreOriginalUri.bind(this)} > <Auth /> <Routes /> </Security>De todos modos, estos consejos son mucho más idiomáticos que React, por lo que, a menos que tenga una razón para no aplicar estos consejos, le recomiendo que los siga.
0
Intente mover la declaración del controlador fuera del constructor. No veo ninguna necesidad de envolverlo en un intento/captura porque no hay código de ejecución allí, solo declara el controlador.
class App extends React.Component<any, any> { restoreOriginalUri: any; constructor(props) { super(props); } restoreOriginalUri = async (_oktaAuth, originalUri) => { this.props.history.replace( toRelativeUrl(originalUri, window.location.origin) ); }; ... esto vinculará this a la instancia del componente y debería poder acceder a this.props