redux 如何在react-js的前端显示数据？

qgzx9mmu  于 2022-11-12  发布在  React
关注(0)|答案(3)|浏览(130)

我已经设法从一个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数据？

redux

3条答案

按热度按时间
c90pui9n

c90pui9n1#

import { getProjects as onGetProjects } from "store/actions";

函数getProjects被重命名（别名）为onGetProjects。此函数是一个操作，在调度时将从api检索数据

export const getProjects = () => ({
  type: GET_PROJECTS,
})

我不熟悉 Saga ，但我猜它只是有一些实用函数来帮助运行异步调用，然后将响应分派到redux存储。

function* fetchProjects() {
  try {
    const response = yield call(getProjects)
    yield put(getProjectsSuccess(response))
  } catch (error) {
    yield put(getProjectsFail(error))
  }
}

^这是一个生成器函数，所以看起来有点奇怪，但它实际上是在调度getProjectsSuccess和响应，或者调度getProjectsFail和错误。
这一切都是从以下内容开始的：

useEffect(() => {
        dispatch(onGetProjects());
      }, [dispatch]);

这将在装载时运行一次，并检索项目，否则将导致错误

const { projects } = useSelector(state => ({
        projects: state.projects.projects,
      }));

项目将在redux存储状态的一部分更新，并且可以使用上面的useSelector函数进行访问。
所有数据都将位于projects变量中。

<CardProject projects={projects} />

项目数据在此处提供给CardProject组件^
然后将它们Map到card-project.js中的CardProject组件内

{map(projects, (project, key) => (
      ...

      {project.name}

      ...
   ))}

这有帮助吗？

赞(0）分享  回复(0）举报  2022-11-12
pgccezyw

pgccezyw2#

在map函数中，你必须传递一个数组，我猜你传递的是一个对象，所以你必须尝试：

{map((projects.dataStoreApi), (project, key) => (
赞(0）分享  回复(0）举报  2022-11-12
zzzyeukh

zzzyeukh3#

{map((project,index)=>  {
  {  project.name }
    // for further donor
    project.donor.map((donor,index)=>{
      {donor}
    })
})}

也传递key={{unique for each map iteration}}

赞(0）分享  回复(0）举报  2022-11-12
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com