React Native 列表元素未正常分隔问题求助

你说得没错，问题确实出在嵌套数组的遍历上！现在你只是把data和description这两个数组直接作为文本渲染，React Native会自动把数组元素拼接成逗号分隔的字符串，所以三个元素才会挤在一起，没法分开显示。

核心问题点 #

在绿色背景的视图中，你直接写了{letter.data}和{letter.description}，这相当于把整个数组转成了字符串（比如["Abricot", "Abricot", "Abricot"]会变成Abricot,Abricot,Abricot），自然没法区分每个元素。

修复后的代码 #

我们需要在遍历letter数组的基础上，再嵌套遍历data和description数组，确保每个元素都能单独渲染，同时保持数据和描述的一一对应：

<View style={{ flex: 15, backgroundColor: "red" }}>
  <Text style={[styles.texte201, { marginTop: 50, marginLeft: 80 }]}> Glossaire </Text>
  <View style={{ flex: 1, backgroundColor: "snow", flexDirection: "row", shadowColor: "#000000", shadowOpacity: 0.2, shadowRadius: 10, marginLeft: 80, marginRight: 80, justifyContent: "center", alignItems: "center", marginTop: 30, }} >
    {letter.map((item) => { // 变量名改成item避免和数组名冲突
      if (item.data.length >= 1) {
        return (
          <View key={item.id}> {/* 加上key避免React警告 */}
            <Text style={{ fontSize: 20, fontWeight: "600", marginLeft: 15, marginRight: 15, }} > {item.name} </Text>
          </View>
        );
      } else {
        return (
          <View key={item.id}>
            <Text style={{ color: "grey", fontSize: 20, fontWeight: "600", marginLeft: 15, marginRight: 15, }} > {item.name} </Text>
          </View>
        );
      }
    })}
  </View>
  <View style={{ flex: 10, backgroundColor: "green" }}>
    {letter.map((item) => {
      if (item.data.length >= 1) {
        // 嵌套遍历data数组，同时通过索引匹配对应的description
        return item.data.map((dataItem, index) => (
          <View key={`${item.id}-${index}`} style={{ flex: 1, backgroundColor: "blue", flexDirection: "row", marginVertical: 10 }} >
            <Text style={{ fontSize: 90, fontWeight: "200", marginLeft: 15, marginRight: 15, }} > {item.name} </Text>
            <View style={{ flex: 1 }}> {/* 用View包裹文本，优化布局 */}
              <Text style={{ fontSize: 18, fontWeight: "600", marginTop: 25, }} > {dataItem} </Text>
              <Text style={{ marginTop: 10 }}> {item.description[index]} </Text>
            </View>
          </View>
        ));
      }
      return null; // 无数据时返回null，避免空渲染
    })}
  </View>
</View>

额外优化说明 #

1. 把遍历变量名从letter改成item，避免和数组本身重名，提升代码可读性
2. 给所有动态渲染的元素添加key属性，符合React规范，消除控制台警告
3. 用View包裹数据和描述文本，避免长文本导致的布局混乱
4. 添加marginVertical让不同数据项之间有明显的分隔空间

数据与样式部分（保持原结构） #

const letter = [
  { id: "1", name: "A", data: ["Abricot", "Abricot", "Abricot"], description: [ "Un abricot est un fruit", "Un abricot est un fruit", "Un abricot est un fruit", ], },
  { id: "2", name: "B", data: ["Branche", "Branche", "Branche"], description: [ "Une branche vient d'un arbre", "Une branche vient d'un arbre", "Une branche vient d'un arbre", ], },
  { id: "3", name: "C", data: [], },
  { id: "4", name: "D", data: ["Dalle", "Dalle", "Dalle"], description: [ "Une dalle de pierre", "Une dalle de pierre", "Une dalle de pierre", ], },
  { id: "5", name: "E", data: [], },
  { id: "6", name: "F", data: [], },
  { id: "7", name: "G", data: [], },
  { id: "8", name: "H", data: [], },
  { id: "9", name: "I", data: [], },
  { id: "10", name: "J", data: [], },
  { id: "11", name: "K", data: [], },
  { id: "12", name: "L", data: [], },
  { id: "13", name: "M", data: [], },
  { id: "14", name: "N", data: [], },
  { id: "15", name: "O", data: [], },
  { id: "16", name: "P", data: [], },
  { id: "17", name: "Q", data: [], },
  { id: "18", name: "R", data: [], },
  { id: "19", name: "S", data: [], },
  { id: "20", name: "T", data: [], },
  { id: "21", name: "U", data: [], },
  { id: "22", name: "V", data: [], },
  { id: "23", name: "W", data: [], },
  { id: "24", name: "X", data: [], },
  { id: "25", name: "Y", data: [], },
  { id: "26", name: "Z", data: [], },
];

const styles = StyleSheet.create({
  texte201: { color: "#424242", fontSize: 25, fontWeight: "600", }
});

这样修改后，每个字母对应的3个数据项就会单独分开显示，完全符合你的需求啦！

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