0
240
ViewsCan not read properties of null (reading '0'). React
Can someone please help me on this.
I am getting errors while running the below code. I don't know what mistake I am doing.
I have put the comment in the line where error is coming.
Even a little suggestion would be very helpful.
Error is in the image at the end.
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>
);
}
}
What mistake I am doing. I am new to react.
Can it be resolved using callback?
I used setTimeout() but it didn't help
2 answers
Answer question0
I'm not entirely sure about what's causing the bug, but there are several things to check.
props vs this.props
When writing components as a class, you'll have this rough structure:
class Component extends React.Component {
constructor(props) {
super(props)
}
render() {
return <>text that is rendered</>
}
}
This follows several object oriented paradigms. Most notably, though, the props are given as an argument to the constructor, then are passed into super. Since a React component extends React.Component, the super is React.Component's constructor and it assigns props to this.props.
That means anywhere in the class, you can access the props with this.props.
Methods
Inside your class, you've declared a method restoreOriginalUri.
class Component extends React.Component {
restoreOriginalUri: any
//…
}
You are then initializing that method inside the constructor. In general, it's best practice to not do this and just initialize the method in the root of the class.
class Component extends React.Component {
async restoreOriginalUri(_oktaAuth, originalUri) {
this.props.history.replace(
toRelativeUrl(originalUri, window.location.origin)
)
}
//…
}
Also notice the use of this.props.
By following conventions like this, you'll encounter fewer bugs (like the one you're experiencing now).
.bind(this)
When passing methods down to components as you do here, it's best to use .bind(this) at the end.
In short, JavaScript's this keyword can be confusing and by passing down the method as is, this will no longer refer to the App component.
<Security
oktaAuth={oktaAuth}
restoreOriginalUri={this.restoreOriginalUri.bind(this)}
>
<Auth />
<Routes />
</Security>
Anyways, these tips are much more idiomatic React, so unless you have a reason to not apply these tips, I'd recommend following applying them.
0
Try moving the declaration of the handler outside the constructor. I don't see any need to wrap it in a try/catch because you're no execution code there, just declaring the handler.
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)
);
};
...
this will bind this to the component instance and you should be able to access this.props