Reactjs React-Native中的自定义映射

我有一个数组状态，我正试图映射到一个组件中，其中每三个项目进入一个道具。 该数组包含以下内容：

players: [1, "Timmy", "H", 2, "Julie", "M"]

以下是我映射它的方式：

const myPlayers = this.state.players.map((id, first, last) =>
        <Player 
            key={id} 
            fName={first} 
            lName={last} 
        />
    )

我希望得到的结果是：

Timmy H
Julie M

以下是我的播放器组件的代码片段，以供参考：

<TouchableOpacity>
        <View style={styles.container}>
        <Text style={styles.name}>{props.fName} {props.lName}</Text>
        </View>
</TouchableOpacity>

{props.fName}{props.lName}

你知道如何做到这一点吗？

---

谢谢

这不是地图的工作原理。Map将函数应用于数组的每个元素。您不能将它们分组。我建议你做的是有一个这样的结构：

玩家：[{id:1，名字：“蒂米”，名字：“H”}，{id:2，名字：“朱莉”，名字：“M”}]

。通过这种方式，您的映射将工作，并且更容易处理推送或删除等操作，其他程序员也可以轻松理解您的代码

如果您仍然希望保留该结构，则应该使用for而不是map

<TouchableOpacity>
        <View style={styles.container}>
        <Text style={styles.name}>{props.fName} {props.lName}</Text>
        </View>
</TouchableOpacity>