React Native中如何用map函数结合两数组构建网格并实现点击显示值

问题描述 #

请点击图片查看详情

如图所示，我拥有两个数组：

array_one: [409, 410, 411, 413, 414, 415, 416, 417, 418, 419, 420, 421, 422, 423, 424, 425]

array_two: ["NN", "NM", "NL", "NK", "NJ"]

要求使用map函数构建网格，其中array_one作为行，array_two作为列。用户点击网格项时，需显示对应组合值（例如：NM411）。

我尝试用map函数实现，但无法正确获取两个数组对应索引的组合值，代码如下：

{array_one.map((valone, index) => (
        array_two.map((val, index) => (
          <View style={{width: 35, height: 15, backgroundColor: 'red'}}>
            <Text style={{fontSize: 10}}>{val + valone}</Text>
          </View>
        )
        )
      )
      )}

问题分析与解决 #

你的代码核心问题是两个map循环使用了同名的index变量，内层index会覆盖外层的索引值，导致无法正确关联行列数据。此外，当前的遍历顺序也不符合“array_one为行、array_two为列”的网格结构要求。

修正后的代码示例：

{array_two.map((colVal, colIndex) => (
  <View key={colIndex} style={{flexDirection: 'row', marginVertical: 2}}>
    {array_one.map((rowVal, rowIndex) => {
      const combined = `${colVal}${rowVal}`;
      return (
        <View
          key={`${colIndex}-${rowIndex}`}
          style={{width: 35, height: 15, backgroundColor: 'red', marginHorizontal: 1}}
          onPress={() => alert(combined)}
        >
          <Text style={{fontSize: 10, textAlign: 'center', color: '#fff'}}>{combined}</Text>
        </View>
      );
    })}
  </View>
))}

关键修改说明： #

• 给两个map的索引变量分别命名为colIndex和rowIndex，避免变量覆盖
• 外层遍历array_two（列），内层遍历array_one（行），构建符合要求的网格布局
• 为每个列表项添加唯一key，符合React渲染规范
• 新增onPress事件，点击时弹出组合值
• 微调样式，优化网格项的排版显示

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