未处理的拒绝（TypeError）：无法读取未定义的React Js的属性“ state”

Question

我正在尝试通过链接传递一些数据，并且当我试图获取该数据时，我试图在另一个组件中使用该数据。

  

未处理的拒绝（TypeError）：无法读取的属性“状态”   未定义

这是代码文件，我正在尝试通过Link传递数据

import React, { Component } from "react";
import "./../css/index.css";
import { BrowserRouter as Router, Switch, Route, Link,Redirect } from "react-router-dom";

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      accounts : []
   }
  }

  componentDidMount = async () => {
    const response = await fetch(
      "https://cors-anywhere.herokuapp.com/https://905dpx1sm3.execute-api.us-east-1.amazonaws.com/prod/account_info",
      {
        headers: {
          "x-api-key": "EEpDixlDSO7J3eHjahLZZ1EQjwNzPa8f2ritb3fn"
        }
      }
    );

    const data = await response.json();
    this.setState({ accounts:data,region:region,account:account});

  };
  renderTableData() {
    return this.state.accounts.map((account, index) => {
      const {
        environment,
        account_number,
        bu,
        account_alias,
        resource_name
      } = account; //destructuring
      const regions = account.regions;
      return (
        <tr key={index}>
          <td className="fixed-side">{account_number}</td>
          <td className="fixed-side">{account_alias}</td>
          <td className="fixed-side">{environment}</td>
          <td className="fixed-side">{bu}</td>
          <td>
            <Link to={{
              pathname:"/securityGroups",
              search: "?sort=name",
              hash: "#the-hash",
              state: { fromDashboard: true }}}>
              {regions["us-east-1"]}
            </Link>
            </td>
        </tr>
      );
    });
  }
  render() {
    return (
      <div className="wrapper">
        <div id="table-scroll" className="table-scroll">
          <div className="table-fixed-right table-wrap">
            <table className="main-table">
              <thead>
                <tr>
                  <th className="fixed-side" scope="col">Account Number</th>
                  <th className="fixed-side" scope="col">Account Alias</th>
                  <th className="fixed-side" scope="col">Environment</th>
                  <th  className="fixed-side" scope="col">BU</th>
                  <th scope="col">us-gov-west-1</th>
                </tr>
              </thead>
          <tbody>
            {this.renderTableData()}
          </tbody>
        </table>
      </div>
    </div>
    </div>
    );
  }
}
export default Table;

以下是我试图获取通过链接传递的数据的组件，但是我遇到错误，有人可以告诉我我哪里错了

import React, { Component } from "react";
import "./../css/index.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Table from "./Table";

class SecurityGroupTable extends Component {
  constructor(props) {
    super(props)
  };

  }
  render() {
    const state = this.props.location.state
    return (
        <div>{state}</div>
    );
  }
}

export default SecurityGroupTable;