javascript - 在 ReactJS 中循环映射内的数组索引

Question

我在 map 中有一个 {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>
    );

Answer 1

您可以使用 map 索引:

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>
    );