React Native中如何在JSX内正确渲染二维数组？

React渲染数组列表时，要求Array.map的回调函数必须返回待渲染的React元素，你在外层遍历myDoubleArray的回调中，仅执行了内层的loop.map，但没有将内层map生成的元素数组返回，因此外层map最终得到的全是undefined，自然没有任何内容渲染。

你的错误写法中，缺失return的位置如下：

<View>
  {myDoubleArray.map(loop => {
    // 仅执行了内层map，没有返回内层生成的元素数组
    loop.map(elm => {
      return <Text>{elm}</Text>;
    });
    // 箭头函数包裹大括号时，无显式return则默认返回undefined
  })}
</View>

你定义二维数组的逻辑没有问题，可以正常生成5行3列的目标数据，无需修改。

注意渲染列表时需要给每一项添加唯一的key属性，避免React抛出警告，推荐给每一行单独包裹容器View方便布局控制：

<View>
  {myDoubleArray.map((row, yIndex) => {
    // 外层必须return，将内层遍历生成的元素列表返回
    return (
      <View key={`row-${yIndex}`}>
        {row.map((item, xIndex) => {
          return <Text key={`col-${yIndex}-${xIndex}`}>{item}</Text>
        })}
      </View>
    )
  })}
</View>

如果习惯箭头函数简写，也可以去掉大括号用隐式返回，写法更简洁：

<View>
  {myDoubleArray.map((row, yIndex) => (
    <View key={`row-${yIndex}`}>
      {row.map((item, xIndex) => (
        <Text key={`col-${yIndex}-${xIndex}`}>{item}</Text>
      ))}
    </View>
  ))}
</View>

补充说明：JSX支持任意层级的嵌套数组渲染，只要最终在{}中传入的是React元素、或由React元素组成的合法嵌套数组，React都可以正常解析渲染，不存在二维数组无法渲染的限制。

内容的提问来源于stack exchange，提问作者penguiiiiiin