在 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 是一个 array.. 因此，如果您希望为 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>
    );
   }

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

Answer 2

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

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

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

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

Dynamic Children 部分对此有很好的解释：https://facebook.github.io/react/docs/multiple-components.html

您的代码可能如下所示：

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

如果这能解决您的问题，请告诉我。