如何顯示 componentDidMount 在另一個頁面中獲取數據？

Question

我正在嘗試在另一個頁面中顯示 componentdidmount 獲取數據，就像我使用 componentdidmount 在Edetail.js中獲取數據一樣，我還想在我試圖顯示的Summary.js中顯示摘要數據，但我得到的錯誤是我的所有代碼。

詳細信息.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;

摘要.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>
    );
  }
}

所以這是我的代碼，所以我想顯示來自不同頁面的表格summary ，但我想從edetail.js獲取數據，因為當我嘗試這樣做時，我已經在此頁面中獲取數據，顯示item does ot exit in summary page所以如何在edetails頁面中顯示摘要數據我卡在這里

Answer 1

<Summary movie ={movie}/>

並在 Summary.js 中像這樣訪問

this.props.movie

Answer 2

向摘要組件傳遞數據，因此在 edetails 組件中獲取數據，在渲染時您已經調用<Summary />組件只需將數據作為<Summary movieData={movie} />之類的道具傳遞，而在摘要組件中只是通過 this.props.movieData 獲取並使用它