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

我试图在另一个页面中显示componentdidmount获取数据，就像我在

Edetail.js

中使用componentdidmount获取数据一样，我还想在

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;

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>
    );
  }
}

import React，{Component}来自“React”；
从“./Electric/DateForm”导入日期表单；
从“../../Container/Layout/Topbar1”导入Topbar1；
从“./config”导入配置；
从“/Summary”导入摘要
导出类Edetails扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电影：空
};
}
异步组件didmount（）{
试一试{
const res=等待取数(
`${config.apirl.electric1}${this.props.match.params.pk}/`
);
const movie=wait res.json（）；
//console.log（电影）；
这是我的国家({
电影
});
}捕获（e）{
控制台日志（e）；
}
}
render（）{
const{movie}=this.state；
if（movie==null）返回加载….
；
返回(
{movie.results.map（项=>(
{item.id}
{item.date}
{项目.电动自行车里程
“${item.电动自行车\里程数}”`
: 0}{" "}
{item.electric\u bike\u time？`${item.electric\u bike\u time}`:0}
{item.electricaverage？`${item.electricaverage}`:0}
{item.letternumber？`${item.letternumber}`:0}
{item.letterweight？`${item.letterweight}`:0}
{item.packagenumber？`${item.packagenumber}`:0}
{item.packageweight？`${item.packageweight}`:0}
{item.co2？`${item.co2}`:0}
{item.delivery\u count？`${item.delivery\u count}`:0}
))}
);
}
}
导出默认的Edetails；

Summary.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;

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>
    );
  }
}

import React，{Component}来自“React”；
导出默认类Summy扩展组件{
render（）{
返回(
SUMA
{item.total\u milage？`${item.total\u milage}`:0}
{item.total\u movingtime？`${item.total\u movingtime}`:0}
{item.total\u averagespeed？`${item.total\u averagespeed}`:0}
{item.total_letter？`${item.total_letter}`:0}
{item.total_letter_weight？`${item.total_letter_weight}`:0}
{item.total_pack？`${item.total_pack}`:0}
{item.total_package_weight？`${item.total_package_weight}`:0}
{item.total\u co2\u save？`${item.total\u co2\u save}`:0}
{item.total_deliveries？`${item.total_deliveries}`:0}
0
);
}
}

这是我的代码，所以我想从不同的页面显示表的
summary
，但我想从
edetail.js
获取数据，因为当我尝试这样做时，我总是在这个页面中获取数据，显示
项在摘要页面中不存在
，所以如何在我卡在这里的
edetails
页面中显示摘要数据
摘要组件传递数据，因此在edetails组件中获取数据，而在渲染时，您已经调用了
组件，只需像
一样将数据作为道具传递，而在摘要组件中，只需通过this.props.movieData获取数据，并使用它来传递数据，因此在edetails组件中获取数据，渲染时，您已经调用了组件，只需像道具一样传递数据，在摘要中，组件只需通过this.props.movieData获取数据并使用它
<Summary movie ={movie}/>