使用ReactJS映射数组数组

Question

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

首先，我从简单开始，并开始工作-一系列简单的国家（以及国家/地区代码）

private void Button1_Click(object sender, EventArgs e)
{
    MenuItem1.Visible = true;
}

private void Button2_Click(object sender, EventArgs e)
{
    MenuItem1.Visible = false;
}

这是它的外观，左侧是浏览器，右侧是控制台；

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

所以这是一个由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>
   )
 }

这假定每个数组中的每个项目都有一个id和一个title。适当更改它们。

很显然，这很复杂，所以我建议将其分解为较小的组件-CountryHistoricalList组件，它可能需要国家代码，标题和数据数组。