javascript - 如何访问 map 内的下一个/上一个对象 - react ？

Question

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

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

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

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