无法读取 null 的属性(读取“0”)。反应
Can not read properties of null (reading '0'). React
有人可以帮我解决这个问题吗?
我在 运行 下面的代码中遇到错误。我不知道我在做什么错误。
我已将评论放在 error
即将到来的行中。
即使是一点点建议也会很有帮助。
最后的图片有错误。
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>
);
}
}
我犯了什么错误。我是新来的。
可以用callback
解决吗?
我用了 setTimeout()
但没有用
尝试将处理程序的声明移到构造函数之外。我认为没有必要将它包装在 try/catch 中,因为那里没有执行代码,只是声明处理程序。
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
绑定到组件实例,您应该能够访问 this.props
我不完全确定是什么导致了错误,但有几件事需要检查。
props
对比 this.props
将组件编写为 class 时,您将具有以下粗略结构:
class Component extends React.Component {
constructor(props) {
super(props)
}
render() {
return <>text that is rendered</>
}
}
这遵循几个面向对象的范例。不过,最值得注意的是,道具作为构造函数的参数提供,然后传递给 super
。由于 React 组件扩展 React.Component
,super
是 React.Component
的构造函数,它将 props
分配给 this.props
.
这意味着 class 中的任何地方,您都可以使用 this.props
访问道具。
方法
在您的 class 中,您声明了一个方法 restoreOriginalUri
。
class Component extends React.Component {
restoreOriginalUri: any
//…
}
然后您将在构造函数中初始化该方法。一般来说,最好不要这样做,只在 class.
的根目录中初始化方法
class Component extends React.Component {
async restoreOriginalUri(_oktaAuth, originalUri) {
this.props.history.replace(
toRelativeUrl(originalUri, window.location.origin)
)
}
//…
}
还要注意 this.props
.
的使用
通过遵循这样的约定,您会遇到更少的错误(就像您现在遇到的错误一样)。
.bind(this)
像这里一样将方法向下传递给组件时,最好在最后使用 .bind(this)
。
简而言之,JavaScript 的 this
关键字可能会造成混淆,通过按原样传递该方法,this
将不再引用 App
组件.
<Security
oktaAuth={oktaAuth}
restoreOriginalUri={this.restoreOriginalUri.bind(this)}
>
<Auth />
<Routes />
</Security>
无论如何,这些技巧更符合 React 的习惯,因此除非您有理由不应用这些技巧,否则我建议您遵循这些技巧。
有人可以帮我解决这个问题吗?
我在 运行 下面的代码中遇到错误。我不知道我在做什么错误。
我已将评论放在 error
即将到来的行中。
即使是一点点建议也会很有帮助。
最后的图片有错误。
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>
);
}
}
我犯了什么错误。我是新来的。
可以用callback
解决吗?
我用了 setTimeout()
但没有用
尝试将处理程序的声明移到构造函数之外。我认为没有必要将它包装在 try/catch 中,因为那里没有执行代码,只是声明处理程序。
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
绑定到组件实例,您应该能够访问 this.props
我不完全确定是什么导致了错误,但有几件事需要检查。
props
对比 this.props
将组件编写为 class 时,您将具有以下粗略结构:
class Component extends React.Component {
constructor(props) {
super(props)
}
render() {
return <>text that is rendered</>
}
}
这遵循几个面向对象的范例。不过,最值得注意的是,道具作为构造函数的参数提供,然后传递给 super
。由于 React 组件扩展 React.Component
,super
是 React.Component
的构造函数,它将 props
分配给 this.props
.
这意味着 class 中的任何地方,您都可以使用 this.props
访问道具。
方法
在您的 class 中,您声明了一个方法 restoreOriginalUri
。
class Component extends React.Component {
restoreOriginalUri: any
//…
}
然后您将在构造函数中初始化该方法。一般来说,最好不要这样做,只在 class.
的根目录中初始化方法class Component extends React.Component {
async restoreOriginalUri(_oktaAuth, originalUri) {
this.props.history.replace(
toRelativeUrl(originalUri, window.location.origin)
)
}
//…
}
还要注意 this.props
.
通过遵循这样的约定,您会遇到更少的错误(就像您现在遇到的错误一样)。
.bind(this)
像这里一样将方法向下传递给组件时,最好在最后使用 .bind(this)
。
简而言之,JavaScript 的 this
关键字可能会造成混淆,通过按原样传递该方法,this
将不再引用 App
组件.
<Security
oktaAuth={oktaAuth}
restoreOriginalUri={this.restoreOriginalUri.bind(this)}
>
<Auth />
<Routes />
</Security>
无论如何,这些技巧更符合 React 的习惯,因此除非您有理由不应用这些技巧,否则我建议您遵循这些技巧。