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

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