【问题标题】：How to map i and i+1 values of a javascript array?如何映射 javascript 数组的 i 和 i+1 值？
【发布时间】：2019-11-24 00:14:45
【问题描述】：

我想使用地图在 javascript 地图中显示第 i 个值和第 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>

感谢任何帮助或建议。谢谢。

【问题讨论】：

您的代码块有未闭合的括号和大括号。

标签： javascript arrays reactjs jsx

【解决方案1】：

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

注意： (index % 2 === 0) 是您指定 nth 孩子的地方（例如：2 在这种情况下）

稍后在您的 render 方法中使用 destructuring in map()。

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>

【讨论】：

我想同时显示第 i 个和第 i+1 个值。这个显示一次只有一个项目。我希望同时显示两个元素。
@anup 我更新了。这是你要找的吗？

【解决方案2】：

使用整个数组而不是当前迭代

地图的每次迭代中的证言都是一个对象。而testimonialContent 是整个数组。

{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}>
          {testimonialContent[i+1]} // this is the line to change
        </div>
      </div>
    </Carousel.Item>

但是这里感觉有些不对劲。我想你可能有一个x y problem

为什么要将下一个迭代用作当前迭代？最后一项将失败，因为它不存在，并且永远不会显示第一个 testimonialContent 的值，因为您总是从索引 1 开始。

我会重新考虑您在这里所做的事情，也许会采取另一种方法。

【讨论】：

不应该testimonial[i] 只是testimonial？
@Kobe 作者要求从他的代码中获得下一个推荐，它是使用正确数组的精确副本
我说的是第一次提到推荐？ tesitmonial[i] 将未定义。

【解决方案3】：

testimonial 不是数组，而是该数组中的当前迭代项。对于“下一个”项目，您可以使用数组testimonialContent。

从评论中我了解到您希望实际生成 n/2 行，以便每个项目只出现一次。在这种情况下，使用普通的.map() 并不好，因为它会生成尽可能多的行，而您只需要一半的行数。相反，您可以使用Array.from 生成一个行数为一半（向上舍入）的数组，并使用该方法的回调参数。

Array.from({length: (testimonialContent.length+1)>>1}, (_, i) => {
  return (
    <Carousel.Item className={classes.carousel_item}>
      <div className={classes.root}>
        <div className={classes.testimonial_card}>
          {testimonialContent[i*2]}
        </div>
        {/* Second card */}
        <div className={classes.second_card}>
          {testimonialContent[i*2+1] || ""}
        </div>
      </div>
    </Carousel.Item>
  )
})

【讨论】：

我喜欢你的解决方案，它有效，但有一个问题，我在一个轮播项目中得到 A 和 B，在另一个轮播项目中得到 B 和 C。我希望它在一个轮播项目中是 A 和 B，在另一个轮播项目中是 C 和 D，依此类推。感谢您的解决方案。
最好将此信息添加到您的问题中。我相应地更新了我的答案。

【解决方案4】：

请参阅您的第一个 div 中的 testimonial 实例以及您的第二个 div 中 testimonialContent 数组中第 i 个 +1 位置上的元素。

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

【讨论】：