Как получить доступ к данным из одного компонента в другой компонент в реакции js - PullRequest
Новая
       51

Как получить доступ к данным из одного компонента в другой компонент в реакции js

0 голосов
/ 21 апреля 2020

Привет У меня есть один компонент, в котором я рендеринг другого компонента. Я не могу передать данные из компонента Agmt в компонент AgmtTable. Я хочу передать детали компоненту AgmtTable, сформировать там таблицу и отобразить эту таблицу в родительском компоненте Agmt. Я не могу понять, как я могу получить к нему доступ в AgmtTable. Код в компоненте Agmt выглядит следующим образом. 

import React, { Component } from "react";
import { connect } from "react-redux";
import AgmtTable from "./AgmtTable";
import * as AgmtAction from "../actions/AgmtAction";

class AgmtContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  //fetch Agmt details. This is giving me a data in mapStateToProps function below
  componentDidMount() {
    this.props.dispatch(
      AgmtAction.getAgmtsFor(id)
    );
  }

  render() {
    const data = this.props.Agmt;//here I have a data as object
    return (
      <React.Fragment>
        <div>
          <AgmtTable Data={data} />
        </div>
      </React.Fragment>
    );
  }
}

function mapStateToProps(state) {
  return {
    Agmt: state.AgmtsDetails.AgmtsData,// here I have a data
  };
}

export default connect(mapStateToProps)(AgmtContainer);

Код в компоненте AgmtTable следующим образом. 

import React, { Component } from "react";

class AgmtTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  getHeaader = () => {
    console.log("details", this.state.details);//here I am not getting a data from props
    var tableHeadings = [
      "Agmt ID",
      "Start Date",
      "End Date",
    ];
    return tableHeadings.map((key) => {
      return <th key={key}> {key.toUpperCase()}</th>;
    });
  };

  getRowsData = (e) => {
    return this.props.Data.map((value) => {//in this line I am getting error
      const {
        Agmt_ID,
        Agmt_START_DATE,
        END_DATE,
      } = value;
      return (
        <tr key={Agmt_ID} className="clickable-row active">
          <td> {Agmt_ID} </td>
          <td> {Agmt_START_DATE} </td>
          <td> {END_DATE} </td>
        </tr>
      );
    });
  };

  render() {
    return (
      <div>
        <table
          id="display-table"
          className="table table-bordered table-hover table-responsive table-condensed table-striped table-sm"
        >
          <tbody>
            <tr>{this.getHeaader()}</tr>
            {this.getRowsData()}
          </tbody>
        </table>
      </div>
    );
  }
}

export default AgmtTable;
...