如何在 JSX（React Native）中渲染二維數組？

Question

我在 ReactNative 中編寫二維數組。

Single-Array 在 JSX 中是成功的。
但我不明白如何在 JSX 中使用二維數組。
我們可以在 JSX 中使用二維數組嗎？

渲染成功

<View>
  {myDoubleArray.map(loop => {
    return <Text>{loop}</Text>;
  })}
</View>

渲染什么都不是（我的問題）

<View>
  {myDoubleArray.map(loop => {
    loop.map(elm => {
      return <Text>{elm}</Text>;
    });
  })}
</View>

myDoubleArray 是這樣的二維數組。

const myDoubleArray = new Array(5).fill(null);
for (let y = 0; y < 5; y++) {
  myDoubleArray[y] = new Array(3);
  for (let x = 0; x < 3; x++) {
    myDoubleArray[y][x] = y + ' : ' + x;
  }
}

Answer 1

您不會從外部 map 函數返回值。 所以，它的乘積是一個未定義的數組。 你只需要一個return語句：

<View>
  {myDoubleArray.map(loop => {
    return loop.map(elm => {
      return <Text>{elm}</Text>;
    });
  })}
</View>

Answer 2

您的代碼中有兩個問題您沒有返回任何內容並且您忘記分配一個鍵我使用了索引它不是很好但我不知道您的數組的內容。

<View>
  {myDoubleArray.map((loop, indexA) => 
    loop.map((elm, indexB) => (
      <Text key={`${indexA}_${indexB}`}>{elm}</Text>
    ))
  )}
</View>