如何循環遍歷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.state

return(
<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 中呈現靜態內容

就是這樣

編輯/更新

我想我在這里遺漏了一些關於 UI 靜態數據的工作示例這就是我想要得到的

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>
    );
  }

看到這個堆棧閃電戰。 顯然，您可以根據自己的喜好更改樣式和標簽。

更新

這是您可以用來顯示數據的 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。