如何访问地图内的下一个/上一个对象 - 反应？答案

【问题标题】：How to access next/prev object inside map - react?如何访问地图内的下一个/上一个对象 - 反应？
【发布时间】：2020-06-11 20:40:00
【问题描述】：

我在特定对象内生成下一个/上一个链接时遇到问题。这是我的代码。

someArrCars = [{name: 'somecar1', link: 'somelink1', vin: '123'}, {name: 'somecar2', link: 'somelink2', vin: '345'},...];

生成路线：

someArrCars.map( el => <Route path={el.link} component={() => <OnePageCar carVin={el.vin} key={el.vin}/>}

在一个对象内生成上一个/下一个链接

import React, { Component } from "react";

export default class OnePageCar extends Component {
  render() {
    const { carVin } = this.props;

    someArrCars.map((el, index) => {
      if (el.vin === carVin) {
        return (
          <React.Fragment key={el.vin}>
            {someArrCars
              .slice(index - 1, -(someArrCars.length - index))
              .map(el => (
                <Link src={el.link} />
              ))} {/* <== prev*/}
            {someArrCars
              .slice(index + 1, -(someArrCars.length - index - 2))
              .map(el => (
                <Link src={el.link} />
              ))} {/* <== next*/}
          </React.Fragment>
        );
      }
    });
  }
}

我知道这是一个有点疯狂的想法，但我不知道如何以另一种方式做到这一点......

【问题讨论】：

标签： javascript arrays reactjs dictionary

【解决方案1】：

前一个元素的当前索引减 1，当前索引加 1 得到数组中的下一个元素。

import React, { Component } from "react";

export default class OnePageCar extends Component {
  render() {
    const { carVin } = this.props;

    someArrCars.map((el, index) => {
      const prevEl = someArrCars[index - 1];
      const nextEl = someArrCars[index + 1];

      if (el.vin === carVin) {
        return (
          <React.Fragment key={el.vin}>
            <Link src={prevEl.link} /> {/* <== prev*/}
            <Link src={nextEl.link} /> {/* <== next*/}
          </React.Fragment>
        );
      }
    });
  }
}

【讨论】：

谢谢，它正在工作。 :) 但我对 prevEl 的条件有疑问。在 nextEl 我做了类似的事情```if (nextEl === someArrCars[someArrCars.length]) {nextEl = someArrCars[0]} 我不知道如何用 prevEl 来做。
好的，我明白了。抱歉有问题！ :) 解决方案： if (prevEl === undefined){prev = someArrCars[someArrCars.length-1]}

【解决方案2】：

目前地图方法没有提供。您可以使用不同的方式来做到这一点。就像下面的代码。

someArrCars.map(el, index) => {
    let prev = someArrCars[index-1];
    let next = someArrCars[index+1];
});

【讨论】：

我想我不明白。我如何映射 prev,next 以提取链接？

【解决方案3】：

map 方法的回调接受 3 个参数：

当前项目值；
当前项目索引；
数组map 被调用。

因此，您可以使用索引来获取下一个元素值：

var newArray  = myArray.map(function(value, index, elements) {
  var next = elements[index+1];
  // do something
});

或

var newArray  = myArray.map(function(value, index) {
  var next = myArray[index+1];
  // do something
});

注意，next 变量的值可能是undefined。如果需要，测试变量以防止错误。

【讨论】：

【解决方案4】：

不幸的是我还有一个问题：

所有链接生成器：

someArrCars.map( el => <Route path={el.link} component={() => <OnePageCar carVin={el.vin} key={el.vin}/>}

我想将汽车分类，但我不知道如何使类别依赖于链接。

someArrCars = [{name: 'somecar1', link: 'somelink1', vin: '123', category: 'van'}, {name: 'somecar2', link: 'somelink2', vin: '345', category: 'van'},...];

例子：

<Route exact path={"/van"} component={() => <CarCategory category={"van"}/>}/>

分类网站：

class CarCategory extends Component{
render(){
const {category} = this.props;

let sortCategory = someArrCars.filter( el => el.category === category );
return(
<>
{sortCategory.map (el => {return (
      <React.Fragment key key ={el.vin}>
           <Link to ={el.link}>Some VAN Car</>
           <Link to ={el.link}>Another VAN Car</>
           <Link to ={el.link}>Next VAN Car</>
)}
</>)
 }
}

点击后我将拥有所有汽车，即链接将与类别不匹配。

export default class OnePageCar extends Component {
  render() {
    const { carVin } = this.props;

    someArrCars.map((el, index) => {
      if (el.vin === carVin) {
let prev = someArrCars[index-1];
let next = someArrCars[index+1];
  if (next === someArrCars[someArrCars.length]){
      next = someArrCars[0];
      }
      if (prev === undefined){
          prev = someArrCars[someArrCars.length-1];
         }
       }
        return (
        <React.Fragment key={el.vin}>
            <Link src={prevEl.link} />
            <Link src={nextEl.link} /> 
          </React.Fragment>
        );
      }
    });
  }
}

下一个/上一个按钮在类别中将是错误的，因为它将是其中的所有汽车。

【讨论】：