Javascript 在React组件中使用.map从数据库数组中呈现多个元素？

我正在学习React，遇到了渲染多个元素的问题

问题是我正在从Firebase检索一个数组，它需要为数组中的每个项目返回一个新的div和svg。我知道React只呈现1个元素，所以我需要将我的内容放入包装器中，我已经这样做了。我还创建了一个变量，它使用.map（）在数组中循环并为我创建这些元素

我不明白的是，为什么它不为数组中的每个项目返回一个新的div和svg？相反，它只创建1个div和svg？该数组包含文件夹名称的列表

任何帮助都将不胜感激

class SidebarPrivateFolders extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    let list = this.props.data.map((currentObj) => {
      return (
        <div>
          <svg className="sidebar-icon">
            <use xlinkHref={currentObj.xlinkHref}></use>
          </svg>
          <div className="public-folders">{currentObj.name}</div>
        </div>
      );
    });

    return (
      <div className="sidebar-section">
        <div className="sidebar-section-wrapper">
          {list}
        </div>
      </div>
    );
  }
}

class SidebarPrivateFolders扩展React.Component{
建造师（道具）{
超级（道具）
}
render（）{
let list=this.props.data.map（（currentObj）=>{
返回(
{currentObj.name}
);
});
返回(
{list}
);
}
}

log（this.props.data）返回以下屏幕截图

---

编辑v2：有趣的是，您的数据输入是有组织的，如果您是从更高的级别创建此输入，重新组织其组成方式可能是有效的，但是，从数据数组中解构项可以更容易地调用后续函数：

// Take out the name array and xlinkHref from data
let {xlinkHref, name} = this.props.data[0];
let list = name[0].map((name, i) => {
  return (
    <div key={'sidebar_'+i}>
      <svg className="sidebar-icon">
        <use xlinkHref={xlinkHref}></use>
      </svg>
      <div className="public-folders">{name}</div>
    </div>
  );
});

//从数据中取出名称数组和xlinkHref
让{xlinkHref，name}=this.props.data[0]；
let list=name[0]。映射（（name，i）=>{
返回(
{name}
);
});

没有数据样本的原始响应：

React内部扩散算法的一部分要求使用唯一的“键”属性标识生成对象的列表。您需要将此属性添加到每个迭代器的包装Div中

因此，在Map函数中，您可以跟踪Map索引的参数，并使用该参数将列表的键分开

在“动态子对象”部分有一个很好的解释：

下面是您的代码的外观：

class SidebarPrivateFolders extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    let list = this.props.data.map((currentObj, i) => {
      return (
        <div key={'sidebarlist_'+i}>
          <svg className="sidebar-icon">
            <use xlinkHref={currentObj.xlinkHref}></use>
          </svg>
          <div className="public-folders">{currentObj.name}</div>
        </div>
      );
    });

    return (
      <div className="sidebar-section">
        <div className="sidebar-section-wrapper">
          {list}
        </div>
      </div>
    );
  }
}

class SidebarPrivateFolders扩展React.Component{
建造师（道具）{
超级（道具）
}
render（）{
let list=this.props.data.map（（currentObj，i）=>{
返回(
{currentObj.name}
);
});
返回(
{list}
);
}
}

---

让我知道这是否解决了您的问题。

在您的输出中

currentObj.name

是一个

数组

。。因此，如果您希望为

name

数组中的每个元素创建div，那么您也必须对其进行循环

你可以这样做：

class SidebarPrivateFolders extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    let list = this.props.data.map((currentObj) => {
return currentObj.name[0].map((innerArray,i) => { 
      return (
        <div key={i}>
          <svg className="sidebar-icon">
            <use xlinkHref={currentObj.xlinkHref}></use>
          </svg>
          <div className="public-folders">{currentObj.innerArray[i]}</div>
        </div>
      );
    });
    });

    return (
      <div className="sidebar-section">
        <div className="sidebar-section-wrapper">
          {list}
        </div>
      </div>
    );
   }

class SidebarPrivateFolders扩展React.Component{
建造师（道具）{
超级（道具）
}
render（）{
let list=this.props.data.map（（currentObj）=>{
返回currentObj.name[0].map（（innerArray，i）=>{
返回(
{currentObj.innerArray[i]}
);
});
});
返回(
{list}
);
}

---

p.S这是一个未经测试的解决方案。您可能会遇到语法错误

您可以发布

This.props.data

的示例数据吗？..data是一个只有一个元素的数组…可能您需要

data[0].name[0].map（fn）

Hmm看起来像是“无法读取未定义的属性0”哦，我误读了数据对象，它是一个数组。您是如何创建此数据的？我将编辑我的帖子以确保准确性，对不起。根据@azium注释，您可能希望尝试

currentObj.name[0]。map

而不是

currentObj.name.map

参考编辑的AnEdit：我必须将名称更改为[innerArray]它没有正确显示。谢谢你的帮助！这很有意义，我在数组中有一个数组，需要正确循环。原文：这个答案是可行的。进展，但不是很顺利。它用一个文件夹图标呈现9个不同的div，但是每个文件夹的名称都显示在第一个div中。是的…the[name]应该是内部数组，正如我在OP-trhat中所说的，它未经测试。编码快乐！！！