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

Answer 2

所以。 Array.map已传递index的第二个参数，它是循环迭代的当前索引。因此您可以使用

const displayTrafic = data.map((line, i) =>
        <Col xs="12" sm="12" md="6" key={line.line}>
            <Media>
                <Media left>
                   {metrosImages[i]}
                </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 3

在地图函数中使用index作为另一个参数

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

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

3 个答案: