javascript - 在 React 组件中使用 .map 从数据库数组中渲染多个元素？

Question

我正在学习 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>
    );
  }
}

Console.log(this.props.data) 返回以下屏幕截图。

Answer 1

在你的输出中..currentObj.name是一个数组..所以如果你想为每个元素创建div，你也必须循环它在 name 数组内。

你可以这样做:

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>
    );
   }

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