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

【问题标题】：How to Display componentDidMount fetch data in another page?如何显示 componentDidMount 在另一个页面中获取数据？
【发布时间】：2019-11-07 15:47:01
【问题描述】：

我正在尝试在另一个页面中显示 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>
    );
  }
}

所以这是我的代码，所以我想显示来自不同页面的表的summary，但我想从edetail.js 获取数据，因为当我尝试显示item does ot exit in summary page 时，我已经在此页面中获取数据那么如何在edetailspage 中显示汇总数据我就卡在这里了

【问题讨论】：

向摘要组件传递数据，因此在 edetails 组件中您获取数据，在渲染时您已经调用了
组件只需将数据作为道具传递，例如
并在 Summary 组件中通过 this.props.movieData 获取并使用它

标签： javascript json reactjs fetch-api

【解决方案1】：

<Summary movie ={movie}/>

在 Summary.js 中像这样访问

this.props.movie

【讨论】：

【解决方案2】：

向Summary 组件传递数据，因此在edetails 组件中您获取数据，在渲染时您已经调用<Summary /> 组件只需将数据作为<Summary movieData={movie} /> 之类的prop 传递，而在Summary 组件中通过此获取它.props.movieData 并使用它

【讨论】：