[英]How to access next/prev object inside map - react?
I have problem with generate next/prev link inside specific object.我在特定对象内生成下一个/上一个链接时遇到问题。 It's my code.这是我的代码。
someArrCars = [{name: 'somecar1', link: 'somelink1', vin: '123'}, {name: 'somecar2', link: 'somelink2', vin: '345'},...];
generate route:生成路线:
someArrCars.map( el => <Route path={el.link} component={() => <OnePageCar carVin={el.vin} key={el.vin}/>}
generate links prev/next inside one object在一个对象内生成上一个/下一个链接
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>
);
}
});
}
}
I know it's a little crazy idea, but I don't know how to do it in another way...我知道这是一个有点疯狂的想法,但我不知道如何以另一种方式做到这一点......
subtract 1 from current index for the previous element and add 1 to current index to get the next element in an array.从前一个元素的当前索引中减去 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>
);
}
});
}
}
Currently map method did not provided that.You can do that using difference way.当前地图方法没有提供。您可以使用不同的方式来做到这一点。 like the code bellow.像下面的代码。
someArrCars.map(el, index) => {
let prev = someArrCars[index-1];
let next = someArrCars[index+1];
});
The callback of map
method accepts 3 arguments: map
方法的回调接受 3 个参数:
map
was called upon.调用了数组map
。So, you could use index to get next element value:因此,您可以使用 index 来获取下一个元素值:
var newArray = myArray.map(function(value, index, elements) {
var next = elements[index+1];
// do something
});
or或者
var newArray = myArray.map(function(value, index) {
var next = myArray[index+1];
// do something
});
Note, the value of next
variable may be undefined
.请注意, next
变量的值可能是undefined
。 Test the variable, if need, to prevent errors.如果需要,测试变量以防止错误。
unfortunetly i have another problem:不幸的是,我还有另一个问题:
All links generator:所有链接生成器:
someArrCars.map( el => <Route path={el.link} component={() => <OnePageCar carVin={el.vin} key={el.vin}/>}
I would like to divide the cars into categories and i don't know how to make a category dependent on links.我想将汽车分类,但我不知道如何根据链接创建一个类别。
someArrCars = [{name: 'somecar1', link: 'somelink1', vin: '123', category: 'van'}, {name: 'somecar2', link: 'somelink2', vin: '345', category: 'van'},...];
Example:例子:
<Route exact path={"/van"} component={() => <CarCategory category={"van"}/>}/>
category site:类别网站:
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</>
)}
</>)
}
}
After clicking I will have all the cars, ie the links will not match the category.单击后我将拥有所有汽车,即链接将与类别不匹配。
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 button will be wrong in category, because it will be all cars in it. Next/prev 按钮在类别中将是错误的,因为它将是其中的所有汽车。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.