Как получить доступ к следующему / предыдущему объекту внутри карты - реагировать?

Question

У меня проблема с генерацией следующей / предыдущей ссылки внутри указанного объекта c. Это мой код.

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

Answer 2

К сожалению, у меня есть другая проблема:

Генератор всех ссылок:

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

Кнопка Next / prev будет неправильной в категории, потому что в ней будут все автомобили.

Answer 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. При необходимости проверьте переменную, чтобы избежать ошибок.

Answer 4

В настоящее время метод карты не предусматривает этого. Вы можете сделать это другим способом. как код ниже.

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