[英]How to Display componentDidMount fetch data in another page?
我正在尝试在另一个页面中显示 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
向摘要组件传递数据,因此在 edetails 组件中获取数据,在渲染时您已经调用<Summary />
组件只需将数据作为<Summary movieData={movie} />
之类的道具传递,而在摘要组件中只是通过 this.props.movieData 获取并使用它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.