React组件渲染时如何从数组中每次取出单个字符串对应显示

数据老陈

2026-10-4

问题原因

你代码中直接渲染了完整的排名数组place，React会自动把数组所有元素拼接输出，所以每张卡片都会显示全部4个排名文本。
你没有将排名数组和战队列表的遍历顺序对应起来，只需要利用列表遍历时的索引值取对应排名即可。

修正后代码

const seed = ["1st", "2nd", "3rd", "4th"];
// 原代码中冗余的place变量可直接删除

const TeamCard = ({data}) => {
    return (
        <TeamCardStyle>
            {!data && (
                <Spinner />
            )}
            {data && data.getGroupScores && (data.getGroupScores.slice(0, 4).map((group, index) => (
                // React列表渲染建议加唯一key，若group有唯一id最好替换下方的index
                <Row key={index}>
                    <Col className="teamCard mt-2 mb-2">
                        <Row>
                            {/* 用当前遍历项的索引取seed数组里对应的排名值 */}
                            <p># {seed[index]}</p>
                        </Row>
                        <Row>
                        <Col className="hideSmall">
                            <img className="mouseOn" src="../images/group.png" alt="战队图标" />
                            <img className="mouseOff" src="../images/groupSelected.png" alt="选中战队图标" />
                        </Col>
                        </Row>
                    <p>{group.name}</p>
                    </Col>
                </Row>
                ))
            )}    
        </TeamCardStyle>
    )
}

export default TeamCard;