使用 ReactJS 映射数组的数组

Question

所以我想做的是映射数组的数组

首先，我从简单开始并开始工作 - 一个简单的国家/地区数组（嗯，国家/地区代码）

{countries.map((value, index) => {
  return (
    <span
      key={index}
      className="semi-bold clear"
    >
      <h2>Hello world</h2>

      <hr />
    </span>
  )
})}

这是它的样子，左边是浏览器，右边是控制台；

伟大的！到目前为止一切都很好，接下来是我的数组 - 这是控制台日志中的样子

所以这是一个由 4 个数组组成的数组，这就是我失败的地方，使用上面相同的示例代码，但用这个由 4 个数组组成的数组替换第一个数组，但是当我这样做时，整个事情都失败了，我不明白为什么这行不通，我期望像以前一样返回 4 个 hello worlds

如果还不清楚，这里是我最终想要在浏览器中实现的目标的模型！

Answer 1

您有一个 Javascript 对象，其中包含国家/地区代码到数据数组的键值映射。

要循环 Javascript 对象，您需要执行以下操作：

render () {
  const historicalData = this.groupedByCountryHistoricalFilings()

  return(
    <div>
      {Object.keys(historicalData).map((key) => {
         return (
           <div key={key}>
              <h1>{key}</h1>
              {historicalData[key].map((dataItem) => {
                return (
                 <span key={dataItem.id}>{dataItem.title}</span>
                )
               })}
           </div>
         )
       })}
     </div>
   )
 }

这假设每个数组中的每个项目都有 anid和 a title。适当地更改这些。

显然，阅读起来相当复杂，因此我建议将其分解为更小的组件 - 一个CountryHistoricalList可能包含国家/地区代码、标题和数据数组的组件。