Javascript ReactJs-返回一个div序列

我有一个React类，它接受一个JSON对象数组并输出一组表示键和值的div。问题是，json中的每个对象内部大约有60个键值对；在本例中，我为每个对象渲染第19个索引的div：

import React, { Component } from "react";
import "./Maps.css";
import df3 from "./data/df3.json"
import sample from "./data/sample.json"


class Maps extends Component {
  constructor() {
    super();
    const data = df3;
    this.state = data
  }
  renderDiv = () => {
    var df4 = df3["Devotions"];
    return df4.map(v => {
      return Object.keys(v).map((host) => {
        return (
          <div class={host}>
            {host} {v[host][19]}
            <div class='space' style={{ borderRadius:'19px',
              transform:`scale(${v[host][19]},${v[host][19]})`,
              opacity:'9%'}} >
            </div>
          </div>
        );
      });
    });
  };

  render() {
    return <div id="Maps">{this.renderDiv()}</div>;
  }

}

export default Maps

import React，{Component}来自“React”；
导入“/Maps.css”；
从“/data/df3.json”导入df3
从“/data/sample.json”导入样本
类映射扩展了组件{
构造函数（）{
超级（）；
常数数据=df3；
this.state=数据
}
renderDiv=（）=>{
var df4=df3[“奉献”]；
返回df4.map（v=>{
返回Object.keys（v）.map（（主机）=>{
返回(
{host}{v[host][19]}
);
});
});
};
render（）{
返回{this.renderDiv（）}；
}
}
导出默认地图

我想做的是控制渲染，以便每个索引的div在屏幕上按顺序显示

return Object.keys(v).map((host) => {
        return (
          <div class={host}>
            {host} {v[host][19]}
            <div class='space' style={{ borderRadius:'19px',
              transform:`scale(${v[host][19]},${v[host][19]})`,
              opacity:'9%'}} >
            </div>
          </div>

返回Object.keys（v）.map（（主机）=>{
返回(
{host}{v[host][19]}

我不确定是否应该将我想要返回的所有div集合包装在一个div中，并将它们连接到一个关键帧，但我不确定是否有更优雅的方法来完成

---

一如既往，我们感谢您的帮助！

我想这就是您所需要的：

考虑到，您有多个对象，在每个对象中，数组中有一些数据，并且您希望按顺序显示所有这些数据

renderDiv = () => {
    var df4 = df3["Devotions"];
    let updatedArray = [];
    df4.forEach(v => { //<--- no need of map
        Object.keys(v).forEach((hosts) => { //<--- no need of map
            updatedArray = [...updatedArray , 
                            ...v[hosts].map((host) => {
                                return (
                                <div className={host}>
                                    {host} {host}
                                    <div className='space' style={{ borderRadius:'19px',
                                    transform:`scale(${host},${host})`,
                                    opacity:'9%'}} >
                                    </div>
                                </div> )
                            })
                            ]
        })
    })
    return updatedArray;
}

renderDiv=（）=>{
var df4=df3[“奉献”]；
让updateArray=[]；
df4.forEach（v=>{/{/{
返回(
{host}{host}
)
})
]
})
})
返回更新数组；
}

我应该把所有代码都放在render方法中吗？@VP9，在

renderDiv=（）=>{

中，我得到“instance.render不是函数”。不确定这是怎么造成的。@VP9，在回答相同错误：TypeError:instance.render不是函数时用更新的函数替换整个函数。@VP9