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

这是我的代码，因此我想从不同页面显示表summary，但是我想从edetail.js获取数据，因为我试图在此页面中获取数据显示item does ot exit in summary page那么如何在edetails页面上显示摘要数据，我一直在这里

Answer 1

<Summary movie ={movie}/>

并在Summary.js中这样访问

this.props.movie

Answer 2

向Summary组件传递数据，因此在edetails组件中您可以获取数据，而在渲染时您已经调用了<Summary />组件，只需将数据作为道具传递给<Summary movieData={movie} />，而在Summary组件中通过this.props.movieData获取并使用

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

2 个答案: