javascript - 如何映射JavaScript数组的i和i + 1值？

我想使用一个地图在javascript地图中显示ith值和i + 1值，以在轮播中显示一组两张卡片。

以下是我正在使用的代码，我想对其进行修改以获得所需的结果：

{testimonialContent.map((testimonial, i) => {
  return (
    <Carousel.Item className={classes.carousel_item}>
      <div className={classes.root}>
        <div className={classes.testimonial_card}>
          {testimonial[i]}
        </div>
        {/* Second card */}
        <div className={classes.second_card}>
          {testimonial[i+1]}
        </div>
      </div>
    </Carousel.Item>

任何帮助或建议，表示赞赏。谢谢。

最佳答案

您可以使用reduce()合并数据。

注意：(index % 2 === 0)是您指定nth子级的位置（例如：本例中为2）

稍后在render方法中，在map()中使用destructuring。

const sampleData = ['first', 'second', 'third', 'fourth', 'fifth']

class App extends React.Component {
  render() {
    console.log("rendered");

    const edited = [].concat(sampleData).reduce((unique, value, index) => {
      if (index % 2 === 0) {
        return [...unique, [value]];
      }
      unique[unique.length - 1].push(value);
      return unique;
    }, [])

    return (
      <div>
        {edited.map(([item1, item2]) =>
          <div className='block'>
            {item1 && <div className='odd'>{item1}</div>}
            {item2 && <div className='even'>{item2}</div>}
          </div>
        )}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.block {
  border: 1px solid gray;
}

.odd {
  color: red;
}

.even {
  color: blue;
}

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>