无法读取 null 的属性（读取“0”）。反应

Question

有人可以帮我解决这个问题吗？

我在运行下面的代码中遇到错误。我不知道我在做什么错误。我已将评论放在 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() 但没有用

Answer 1

尝试将处理程序的声明移到构造函数之外。我认为没有必要将它包装在 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

https://reactjs.org/docs/handling-events.html

Answer 2

我不完全确定是什么导致了错误，但有几件事需要检查。

`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 的习惯，因此除非您有理由不应用这些技巧，否则我建议您遵循这些技巧。

无法读取 null 的属性（读取“0”）。反应

Can not read properties of null (reading '0'). React

javascript

reactjs

react-router-dom

okta

okta-api

`props` 对比 `this.props`

方法

`.bind(this)`

无法读取 null 的属性（读取“0”）。反应

Can not read properties of null (reading '0'). React

javascript

reactjs

react-router-dom

okta

okta-api

props 对比 this.props

方法

.bind(this)

`props` 对比 `this.props`

`.bind(this)`