javascript - 如何显示 componentDidMount 在另一个页面中获取数据?
问题描述
我正在尝试在另一个页面中显示 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
页面中显示摘要数据我卡在这里
解决方案
<Summary movie ={movie}/>
并在 Summary.js 中像这样访问
this.props.movie
推荐阅读
- sql - SQL查询计算一段时间内的记录
- bash - 在特定目录中创建文件时错误的所有者
- yaml - Gitlab-CI 中的 YAML 语法 sed
- oauth-2.0 - 如何在没有用户的桌面应用程序中访问受 b2c 保护的资源?
- python - 当您的数据不在偶数时间间隔内时,是否有一种快速方法可以在偶数时间间隔内对 Pandas Dataframe 进行滚动求和?
- sql - Splunk 查询从 JSON 单元格中获取字段
- zsh - 如何在 zsh 本地执行 set -u?
- r - R 中的 ROC 曲线与生存树的 rpart
- .net - 如何在整个应用程序中使用 _Layout.cshtml 设计
- java - 具有 snmpv3 响应且错误为空的 SNMP4j