javascript - 如何在另一个页面显示componentDidMount获取数据？

Question

我正在尝试在另一个页面中显示 componentdidmount 获取数据，就像我使用 componentdidmount 在 Edetail.js 中获取数据一样，我想在 Summary.js 中显示摘要数据> 我试图显示，但出现错误，这是我的所有代码。

Edetails.js

import React, { Component } from "react";
import DateForm from "../Electric/DateForm";
import Topbar1 from "../../Container/Layout/Topbar1";
import config from "../config";
import Summary from "./Summary"

export class Edetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movie: null
    };
  }

  async componentDidMount() {
    try {
      const res = await fetch(
        `${config.apiUrl.electric1}${this.props.match.params.pk}/`
      );
      const movie = await res.json();
      // console.log(movie);
      this.setState({
        movie
      });
    } catch (e) {
      console.log(e);
    }
  }



  render() {
    const { movie } = this.state;
    if (movie === null) return <p>Loading ....</p>;
    return (
      <div className="container" style={{ marginTop: "20px" }}>
          <table class="table table-hover " style={{ marginTop: "20px" }}>
            {movie.results.map(item => (
              <tbody>
                <tr>
                  <td>{item.id}</td>
                  <td>{item.date}</td>
                  <td>
                    <a
                      href={"/uoverview/" + item.user_id}
                      style={{ color: "#13B760" }}
                      class="font-weight-bold"
                    >
                      {item.user ? `${item.user}` : "User"}
                    </a>
                  </td>
                  <td>
                    {item.electric_bike_mileage
                      ? `${item.electric_bike_mileage}`
                      : 0}{" "}
                  </td>
                  <td>
                    {item.electric_bike_time ? `${item.electric_bike_time}` : 0}
                  </td>
                  <td>
                    {item.electricaverage ? `${item.electricaverage}` : 0}
                  </td>
                  <td>{item.letternumber ? `${item.letternumber}` : 0}</td>
                  <td>{item.letterweight ? `${item.letterweight}` : 0} </td>
                  <td>{item.packagenumber ? `${item.packagenumber}` : 0}</td>
                  <td>{item.packageweight ? `${item.packageweight}` : 0} </td>

                  <td>{item.co2 ? `${item.co2}` : 0} </td>

                  <td>{item.delivery_count ? `${item.delivery_count}` : 0}</td>
                </tr>
              </tbody>
            ))}

          </table> 
           <Summary />
        </div>
    );
  }
}

export default Edetails;

Summary.js

import React, { Component } from "react";

export default class Summery extends Component {

  render() {
    return (
      <thead>
        <tr className="thead ">
          <th scope="col"></th>
          <th scope="col" className="text-dark th">
            <strong>SUMA</strong>
          </th>
          <th scope="col" className="text-dark th" style={{ width: "100px" }}>
            {item.total_milage ? `${item.total_milage}` : 0} 
          </th>
          <th scope="col" className="text-dark th" style={{ width: "100px" }}>
            {item.total_movingtime ? `${item.total_movingtime}` : 0}
          </th>
          <th scope="col" className="text-dark th" style={{ width: "100px" }}>
            {item.total_averagespeed ? `${item.total_averagespeed}` : 0} 
          </th>
          <th scope="col" className="text-dark th">
            {item.total_letter ? `${item.total_letter}` : 0}
          </th>
          <th scope="col" className="text-dark th">
            {item.total_letter_weight ? `${item.total_letter_weight}` : 0} 
          </th>
          <th scope="col" className="text-dark th">
            {item.total_pack ? `${item.total_pack}` : 0}
          </th>
          <th scope="col" className="text-dark th" style={{ width: "150px" }}>
            {item.total_package_weight ? `${item.total_package_weight}` : 0} 
          </th>
          <th scope="col" className="text-dark th">
            {item.total_co2_save ? `${item.total_co2_save}` : 0} 
          </th>
          <th scope="col" className="text-dark th">
            {item.total_deliveries ? `${item.total_deliveries}` : 0}
          </th>
          <th scope="col" className="text-dark th">
            0
          </th>
        </tr>
      </thead>
    );
  }
}

所以这是我的代码，所以我想显示来自不同页面的表的摘要，但我想从edetail.js获取数据，因为我已经在中获取数据当我尝试执行此操作时，此页面显示 item does ot exit in 摘要页面 那么如何在 edetails 页面中显示摘要数据我卡在这里

Answer 1

<Summary movie ={movie}/>

并在Summary.js中像这样访问

this.props.movie