ReactJS 动态遍历对象并显示 4 列

如何解决ReactJS 动态遍历对象并显示 4 列

我有一个 reactjs 应用程序，我有一个 state 值 monitors，它具有以下结构：

这个对象是一个虚拟对象，但我的对象具有如下相同的结构：

[
 { "key" : "value" },{ "key" : "value" },]

我使用 bootstrap row 和 col 类来显示值。我的要求如下：

1. 我想显示这些值的 4 列，因此每行有 4 列

因此，根据上述对象，我有 9 组数据，这意味着它是 3 行，其中前两行各有 4 个，最后一行（第 3 行）只有一个值。

我该怎么做？

我目前正在执行以下操作，但我在同一 4 中得到与 row 列重复的相同值。有人可以帮我吗？

{Object.entries(this.state.monitors).map(([key,value]) => (
                    <div className="container">

                        <div className="row">
                            <div className="col-3">
                                <div className="card mb-3 " key={this.state.monitors.id}>
                                    <div className="card-header" style={value['overall_state'] == "OK" ? service_ok : value['overall_state'] == "Alert" ? service_alert : service_nodata}>
                                        <span><i className="fa fa-th"></i></span> {" "} {value["name"]}
                                    </div>
                                    <div className="card-body">
                                        <h5 className="card-title">{value['overall_state'] == "OK" ? <span><i style={{ color: "#2ce659" }} class="fa fa-check-circle"></i></span> : value['overall_state'] == "Alert" ? <span><i style={{ color: "#f24c3a" }} class="fa fa-times-circle"></i></span> : <span><i class="fa fa-exclamation-circle"></i></span>} Status - {value['overall_state'] == "OK" ? "Operational" : value['overall_state'] == "Alert" ? "Outage" : "UnkNown"}</h5>
                                    </div>
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="card mb-3 " key={this.state.monitors.id}>
                                    <div className="card-header" style={value['overall_state'] == "OK" ? service_ok : value['overall_state'] == "Alert" ? service_alert : service_nodata}>
                                        <span><i className="fa fa-th"></i></span> {" "} {value["name"]}
                                    </div>
                                    <div className="card-body">
                                        <h5 className="card-title">{value['overall_state'] == "OK" ? <span><i style={{ color: "#2ce659" }} class="fa fa-check-circle"></i></span> : value['overall_state'] == "Alert" ? <span><i style={{ color: "#f24c3a" }} class="fa fa-times-circle"></i></span> : <span><i class="fa fa-exclamation-circle"></i></span>} Status - {value['overall_state'] == "OK" ? "Operational" : value['overall_state'] == "Alert" ? "Outage" : "UnkNown"}</h5>
                                    </div>
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="card mb-3 " key={this.state.monitors.id}>
                                    <div className="card-header" style={value['overall_state'] == "OK" ? service_ok : value['overall_state'] == "Alert" ? service_alert : service_nodata}>
                                        <span><i className="fa fa-th"></i></span> {" "} {value["name"]}
                                    </div>
                                    <div className="card-body">
                                        <h5 className="card-title">{value['overall_state'] == "OK" ? <span><i style={{ color: "#2ce659" }} class="fa fa-check-circle"></i></span> : value['overall_state'] == "Alert" ? <span><i style={{ color: "#f24c3a" }} class="fa fa-times-circle"></i></span> : <span><i class="fa fa-exclamation-circle"></i></span>} Status - {value['overall_state'] == "OK" ? "Operational" : value['overall_state'] == "Alert" ? "Outage" : "UnkNown"}</h5>
                                    </div>
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="card mb-3 " key={this.state.monitors.id}>
                                    <div className="card-header" style={value['overall_state'] == "OK" ? service_ok : value['overall_state'] == "Alert" ? service_alert : service_nodata}>
                                        <span><i className="fa fa-th"></i></span> {" "} {value["name"]}
                                    </div>
                                    <div className="card-body">
                                        <h5 className="card-title">{value['overall_state'] == "OK" ? <span><i style={{ color: "#2ce659" }} class="fa fa-check-circle"></i></span> : value['overall_state'] == "Alert" ? <span><i style={{ color: "#f24c3a" }} class="fa fa-times-circle"></i></span> : <span><i class="fa fa-exclamation-circle"></i></span>} Status - {value['overall_state'] == "OK" ? "Operational" : value['overall_state'] == "Alert" ? "Outage" : "UnkNown"}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                ))}

解决方法

每行有 12 个虚拟的 1-unit 列。您使用 3 个单位的列，因此该行中只能容纳 4 个，然后换行并重新开始。

您必须简单地遍历此对象（就像您现在所做的那样）并为每个值渲染单个 col-3 div。确保将此循环包含在 container 和 row 中。