我正在尝试在另一个页面中显示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
页中显示摘要数据,我在这里卡住了
<Summary movie ={movie}/>
以及在Summary.js中这样访问
this.props.movie