在 React 中循环遍历二维数组

Question

我对 React 很陌生，所以我想问你，是否有任何方法可以在 React 中循环遍历 2D 数组。

二维数组示例：

const db = {
    "1": {
        "1": "aaa",
        "2": "bbb",
        "3": "ccc"
    },            
    "two": {
        "1": "ddd",
        "2": "eee"
    }
};

我的伪代码：

for(i = 1; i < db.lenght; i++){
     for(j = 1; j < db[i].lenght; j++){
          console.log(db[i][j]);
     }
}

但我不知道如何在 React 中渲染它，例如在 <ul> 标签中。

Answer 1

在 React 中，通常使用 Array#map 之类的数组方法。在你的 React 组件代码中，如果 outerArray 是一个数组数组，你可以这样处理它：

return (
    <ul>
        {outerArray.map((innerArray) => (
            <li>
                {innerArray.map((item) => <li>{item}</li>)}
            </li>
        ))}
    </ul>
);

Answer 2

您可以如下迭代db 对象，并将它们显示在列表中。

const db = {
  "1": {
    "1": "aaa",
    "2": "bbb",
    "3": "ccc"
  },
  two: {
    "1": "ddd",
    "2": "eee"
  }
};

function App() {
  return (
    <ul className="App">
      {Object.keys(db).map(keyOuter => {
        return Object.keys(db[keyOuter]).map(keyInner => {
          return (
            <li key={`${keyInner}-${keyOuter}`}>{db[keyOuter][keyInner]}</li>
          );
        });
      })}
    </ul>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>

Answer 3

这很简单。在循环中返回这样的列表：

<li>{db[i][j]}</li>

---

myList() {
  let list = []
  for(i = 1; i < db.lenght; i++){
     for(j = 1; j < db[i].lenght; j++){
          console.log(db[i][j]);
       list.push(<li key={i+'-'+j}>{db[i][j]}</li>)
       // when rendering list of array elements, wee need unique key
     }
  }
  return list
}

render() {
  return <ul>{this.myList()}</ul>
}

Answer 4

使用Array.prototype.map()循环遍历jsx内部的数组是最简单的：

render() {
    return (
        <ul>
            {db.map(entries => (
                <li>
                    <ul>
                        {entries.map(entry => (
                            <li>{entry}</li>
                        ))}
                    </ul>
                </li>
            ))}
        </ul>
   );
}