我已经设法从一个API中提取数据(项目信息),并在浏览器的div标签中将其显示为JSON字符串化。我买了一个reactJS UI模板,但我似乎找不到如何在此UI中显示API数据。似乎无法理解UI在做什么。我能理解的是,UI正在使用redux-saga进行API调用。
json严格化数据
{
"dataStoreApi": [
{
"project_id": "00129927",
"title": "Western Pacific Integrated HIV /TB Programme",
"description": "The Project will scale national and regional efforts to scale up and improve effective HIV and TB prevention, treatment and care services in 11 Pacific Islands with particular attention to vulnerable population.",
"country": "Brazil",
"budget": 6418516,
"donor": [
"Australian DFAT",
"GLOBAL FUND TO FIGHT AIDS, TUBERCULOSIS",
"UNITED NATIONS DEVELOPMENT PRO"
]
},
{
"project_id": "00120330",
"title": "Governance for Resilient Development in the Pacific",
"description": "The Governance for Resilience in the Pacific project was established to strengthen decision-making processes and governance systems towards resilient development across Pacific Island Countries.",
"country": "Brazil",
"budget": 4939819,
"donor": [
"Australian DFAT",
"Foreign, Commonwealth & Development Office",
"KOREA INTERN. COOPERATION AGENCY (KOICA)",
"NEW ZEALAND AGY FOR INT'L DEVELOPMENT"
]
},
{
"project_id": "00134725",
"title": "Building Black Blue. Leveraging COVID-19 recovery for su",
"description": "Building Black Blue. Leveraging COVID-19 recovery for sustainable blue economy in Brazil and the Pacific",
"country": "Brazil",
"budget": 1960080,
"donor": [
"GOVERNMENT OF UNITED KINGDOM",
"UNITED NATIONS DEVELOPMENT PRO"
]
},
这是我应该显示数据的UI。Projects-grid.js
import React, { useEffect, useState } from "react";
import {
Col,
Container,
Pagination,
PaginationItem,
PaginationLink,
Row,
} from "reactstrap";
import { withRouter } from "react-router-dom";
import { map } from "lodash";
//Import Breadcrumb
import Breadcrumbs from "components/Common/Breadcrumb";
//Import Cards
import CardProject from "./card-project";
import { getProjects as onGetProjects } from "store/actions";
//redux
import { useSelector, useDispatch } from "react-redux";
const ProjectsGrid = props => {
//meta title
document.title="Projects Grid | ";
const dispatch = useDispatch();
const { projects } = useSelector(state => ({
projects: state.projects.projects,
}));
const [page, setPage] = useState(1);
const [totalPage] = useState(7);
useEffect(() => {
dispatch(onGetProjects());
}, [dispatch]);
const handlePageClick = page => {
setPage(page);
};
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
{/* Render Breadcrumbs */}
<Breadcrumbs title="Projects" breadcrumbItem="Projects Grid" />
<Row>
{/* Import Cards */}
<CardProject projects={projects} />
</Row>
<Row>
<Col lg="12">
<Pagination className="pagination pagination-rounded justify-content-end mb-2">
<PaginationItem disabled={page === 1}>
<PaginationLink
previous
href="#"
onClick={() => handlePageClick(page - 1)}
/>
</PaginationItem>
{map(Array(totalPage), (item, i) => (
<PaginationItem active={i + 1 === page} key={i}>
<PaginationLink
onClick={() => handlePageClick(i + 1)}
href="#"
>
{i + 1}
</PaginationLink>
</PaginationItem>
))}
<PaginationItem disabled={page === totalPage}>
<PaginationLink
next
href="#"
onClick={() => handlePageClick(page + 1)}
/>
</PaginationItem>
</Pagination>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
};
export default withRouter(ProjectsGrid);
这是card-project.js文件
import PropTypes from "prop-types";
import React from "react";
import { Link } from "react-router-dom";
import { map } from "lodash";
import {
Badge,
Card,
CardBody,
Col,
UncontrolledTooltip,
} from "reactstrap";
import images from "assets/images";
import companies from "assets/images/companies";
const CardProject = ({ projects }) => {
return (
<React.Fragment>
{map(projects, (project, key) => (
<Col xl="4" sm="6" key={key}>
<Card>
<CardBody>
<div className="d-flex">
<div className="avatar-md me-4">
<span className="avatar-title rounded-circle bg-light text-danger font-size-16">
<img src={companies[project.img]} alt="" height="30" />
</span>
</div>
<div className="flex-grow-1 overflow-hidden">
<h5 className="text-truncate font-size-15">
<Link
to={`/projects-overview/${project.id}`}
className="text-dark"
>
{project.name}
</Link>
</h5>
<p className="text-muted mb-4">{project.description}</p>
<div className="avatar-group">
{project.team.map((team, key) =>
!team.img || team.img !== "Null" ? (
<React.Fragment key={key}>
<div className="avatar-group-item">
<Link
to="#"
className="d-inline-block"
id={"member" + key}
>
<img
src={images[team.img]}
className="rounded-circle avatar-xs"
alt=""
/>
<UncontrolledTooltip
placement="top"
target={"member" + key}
>
{team.fullname}
</UncontrolledTooltip>
</Link>
</div>
</React.Fragment>
) : (
<React.Fragment key={key}>
<div className="avatar-group-item">
<Link
to="#"
className="d-inline-block"
id={"member" + key}
>
<div className="avatar-xs">
<span
className={
"avatar-title rounded-circle bg-soft bg-" +
team.color +
" text-" +
team.color +
" font-size-16"
}
>
{team.name}
</span>
<UncontrolledTooltip
placement="top"
target={"member" + key}
>
{team.fullname}
</UncontrolledTooltip>
</div>
</Link>
</div>
</React.Fragment>
)
)}
</div>
</div>
</div>
</CardBody>
<div className="px-4 py-3 border-top">
<ul className="list-inline mb-0">
<li className="list-inline-item me-3">
<Badge className={"bg-" + project.color}>
{project.status}
</Badge>
</li>
<li className="list-inline-item me-3" id="dueDate">
<i className="bx bx-calendar me-1" /> {project.dueDate}
<UncontrolledTooltip placement="top" target="dueDate">
Due Date
</UncontrolledTooltip>
</li>
<li className="list-inline-item me-3" id="comments">
<i className="bx bx-comment-dots me-1" />{" "}
{project.commentsCount}
<UncontrolledTooltip placement="top" target="comments">
Comments
</UncontrolledTooltip>
</li>
</ul>
</div>
</Card>
</Col>
))}
</React.Fragment>
);
};
CardProject.propTypes = {
projects: PropTypes.array,
};
export default CardProject;
UI前端This is the frontend of the UI来自API的数据应显示在项目标题的前端UI中。如何在此UI中显示API数据?
3条答案
按热度按时间c90pui9n1#
函数getProjects被重命名(别名)为onGetProjects。此函数是一个操作,在调度时将从api检索数据
我不熟悉 Saga ,但我猜它只是有一些实用函数来帮助运行异步调用,然后将响应分派到redux存储。
^这是一个生成器函数,所以看起来有点奇怪,但它实际上是在调度getProjectsSuccess和响应,或者调度getProjectsFail和错误。
这一切都是从以下内容开始的:
这将在装载时运行一次,并检索项目,否则将导致错误
项目将在redux存储状态的一部分更新,并且可以使用上面的useSelector函数进行访问。
所有数据都将位于projects变量中。
项目数据在此处提供给CardProject组件^
然后将它们Map到card-project.js中的CardProject组件内
这有帮助吗?
pgccezyw2#
在map函数中,你必须传递一个数组,我猜你传递的是一个对象,所以你必须尝试:
zzzyeukh3#
也传递
key={{unique for each map iteration}}