javascript - 在 ReactJS 中的地图内循环数组索引

Question

我在地图中有一个 {metrosImages[0]}，我希望在每个循环中将数字增加 1。例如，在第一个循环 -> {metrosImages[0]}，然后是 {metrosImages[1]}，然后 {metrosImages[2]} 直到循环结束。

代码中的一切都有效，我只需要这样做。

const displayTrafic = data.map(line =>
        <Col xs="12" sm="12" md="6" key={line.line}>
            <Media>
                <Media left>
                   {metrosImages[0]}
                </Media>
                <Media body>
                    <Media heading>
                        {line.title}{line.slug === "normal" ? <i className="fas fa-check green"></i> : <i className="fas fa-times red"></i>}
                    </Media>
                    {line.message}
                </Media>
            </Media>
        </Col>
    );

标签： javascriptreactjs

Answer 1

您可以使用地图索引：

const displayTrafic = data.map((line, index) =>
        <Col xs="12" sm="12" md="6" key={line.line}>
            <Media>
                <Media left>
                   {metrosImages[index]}
                </Media>
                <Media body>
                    <Media heading>
                        {line.title}{line.slug === "normal" ? <i className="fas fa-check green"></i> : <i className="fas fa-times red"></i>}
                    </Media>
                    {line.message}
                </Media>
            </Media>
        </Col>
    );