如何在jsx react中循环嵌套对象

Question

我正在使用 react 我想在 UI 上显示一些动态内容，但由于我是新手而无法循环数据，所以发现这很难做到 state={dashboardManpowerCount:{        "CurrentMonth": {          "Total No of employes": 25,          "Ariving": 10,          "Exited": 8        },        "PreviousMonth": {          "Total No of employes": 25,          "Ariving": 10,          "Exited": 8        }      }           }class currAndprevMonthcCounts extends Component {render(){const {dashboardManpowerCount} = this.statereturn(<div><div className="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">                    <div className="row">                       <div className="col-12 col-sm-12 col-md-6 col-lg-5 col-xl-5">                       <h6>Previous Month</h6>                    <h2>395</h2>                     </div>                    <div className="col-12 col-sm-12 col-md-6 col-lg-7 col-xl-7">                    <span className="badge badge-pill badge-secondary mt-2"                    >+7 Ariving</span>                    <br></br>                    <span className="badge badge-pill badge-secondary mt-3">-3 Exiting</span>                     </div>                </div>                </div>                <div className="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">                <div className="row">                       <div className="col-12 col-sm-12 col-md-6 col-lg-5 col-xl-5">                    <h6>Previous Month</h6>                    <h2>395</h2>                    </div>                    <div className="col-12 col-sm-12 col-md-6 col-lg-7 col-xl-7">                    <span className="badge badge-pill badge-secondary mt-2">+5 Ariving</span>                    <br></br>                    <span className="badge badge-pill badge-secondary mt-3">-3 Exiting</span>                     </div>                </div>                </div></div>)}}有两个选项当前月份数据和上个月数据我想循环访问对象并代替我的 jsx 中的静态内容呈现这就是

Answer 1

使用object.keys或object.entries循环对象的属性。

  render() {

    const { dashboardManpowerCount } = this.state;

    const dashboardManpowerCountArray = Object.entries(dashboardManpowerCount);

    return (

      <div>

        {dashboardManpowerCountArray.map(arr => {

          return (

            <div key={arr[0]}>

              <h3>{arr[0]}</h3>

              {Object.entries(arr[1]).map(monthArr => {

                return (

                  <span key={monthArr[0]} style={{ display: "block" }}>{`${

                    monthArr[0]

                  } ${monthArr[1]}`}</span>

                );

              })}

            </div>

          );

        })}

      </div>

    );

  }

看到这个stackblitz。显然改变你喜欢的样式和标签。

更新

这是您可以用来显示数据的 jsx -

import React from "react";

import { render } from "react-dom";

import "bootstrap/dist/css/bootstrap.min.css";

class Events extends React.Component {

  state = {

    dashboardManpowerCount: {

      CurrentMonth: {

        "Total No of employes": 25,

        Ariving: 10,

        Exited: 8

      },

      PreviousMonth: {

        "Total No of employes": 25,

        Ariving: 10,

        Exited: 8

      }

    }

  };

  render() {

    return (

      <div className="divParent row container">

        {Object.entries(this.state.dashboardManpowerCount).map(

          ([monthName, monthData]) => {

            return (

              <div className="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">

                <div className="row">

                  <div className="col-12 col-sm-12 col-md-6 col-lg-5 col-xl-5">

                    <h6>{monthName}</h6>

                    <h2>{monthData["Total No of employes"]}</h2>

                  </div>

                  <div className="col-12 col-sm-12 col-md-6 col-lg-7 col-xl-7">

                    <span className="badge badge-pill badge-secondary mt-2">

                      {`+${monthData.Ariving} Ariving`}

                    </span>

                    <br />

                    <span className="badge badge-pill badge-secondary mt-3">

                      {`-${monthData.Ariving} Exiting`}

                    </span>

                  </div>

                </div>

              </div>

            );

          }

        )}

      </div>

    );

  }

}

render(<Events />, document.getElementById("root"));

但是这次组件不是完全动态的。如果您的对象的架构将来发生变化，您也必须更改 jsx。