Javascript 在数组元素之间切换

我有一系列约会和一个react视图，可以一次显示一个约会。用户可以通过单击前后箭头浏览约会

数据如下所示：

const arr = [
    { start: 10, end: 12, id: 7532 },
    { start: 11, end: 13, id: 6775 },
    { start: 14, end: 15, id: 554 },
    { start: 17, end: 18, id: 3232 }
];

---

我正试图找出实现这一点的最佳方式。页面立即显示第一个元素，理想情况下，当所选元素为arr[0]时，用户将无法单击“上一步”按钮。这同样适用于单击“前进”。我有点困惑数组的索引在这种情况下是如何工作的，我似乎得到了-1的索引值，即使选定的约会是数组的一部分。此外，我不确定将当前索引保存到react状态或仅将其保留在单击时触发的函数中是否有意义

添加一个名为pageIndex的状态，该状态初始化为0，每当分别单击“下一步”或“上一步”按钮时，该状态会递增或递减

如果单击“上一步”时pageIndex的值为-1，那么它应该禁用-这将解决您所述的arr[0]问题

如果pageIndex的值将大于arr的长度，则“前进”按钮将禁用

---

希望这能给你一个想法这是我的工作分页组件

import React from 'react';

// MATERIAL UI CORE
import IconButton from "@material-ui/core/IconButton";

// MATERIAL UI COMPONENTS
import FirstIcon from "@material-ui/icons/FirstPage";
import PrevIcon from "@material-ui/icons/ChevronLeft";
import NextIcon from "@material-ui/icons/ChevronRight";
import LastIcon from "@material-ui/icons/LastPage";

const Pagination = props => {

  const {
    num, // ARRAYS LENGTH
    current, // CURRENT PAGE
    onCurrent, // CHAGING THE CURRENT PAGE MINUS OR POSITION
    fromPage, // START OF PAGINATION
    toPage, // END OF PAGINATION - EXAMPLE 20/40 SO WERE SEEING 20 ARTICLES
    pagely // HOW MANY ITEMS PER PAGE
  } = props;

  const pages = Math.ceil(num / pagely);

  const first = current === 0;
  const last = current === pages - 1;

  return (
    <div className = "pagination">
      <div className = "icon">
        <IconButton
          onClick = {onCurrent.bind(this, 0)}
          disabled = {first}>
          <FirstIcon />
        </IconButton>
      </div>
      <div className = "icon">
        <IconButton
          onClick = {onCurrent.bind(this, Math.max(current - 1, 0))}
          disabled = {first}>
          <PrevIcon />
        </IconButton>
      </div>
      <div className = "text">
        <span>Items {fromPage + 1} - {toPage} of {num}</span>
        <br />
        <span>Page {current + 1} of {pages}</span>
      </div>
      <div className = "icon">
        <IconButton
          onClick = {onCurrent.bind(this, Math.min(current + 1, pages - 1))}
          disabled = {last}>
          <NextIcon />
        </IconButton>
      </div>
      <div className = "icon">
        <IconButton
          onClick = {onCurrent.bind(this, pages - 1)}
          disabled = {last}>
          <LastIcon />
        </IconButton>
      </div>
    </div>
  );

}

export default Pagination;

从“React”导入React；
//材料界面核心
从“@material ui/core/IconButton”导入图标按钮；
//材质UI组件
从“@material ui/icons/FirstPage”导入FirstIcon；
从“@material ui/icons/ChevronLeft”导入PrevIcon；
从“@material ui/icons/ChevronRight”导入NextIcon；
从“@material ui/icons/LastPage”导入LastIcon；
常量分页=props=>{
常数{
num，//数组长度
当前，//当前页
onCurrent，//更改当前页的减号或位置
fromPage，//开始分页
toPage，//分页结束-示例20/40，因此我们看到了20篇文章
pagely//每页有多少项
}=道具；
const pages=Math.ceil（num/pagely）；
const first=当前===0；
const last=当前===第1页；
返回(
{num}的{fromPage+1}-{toPage}项


第{current+1}页，共{pages}
);
}
导出默认分页；

希望这有帮助

---

Daniel

您的思路是正确的，将索引与数据分开存储没有什么错。以下是一些让您开始学习的代码：

class MyComp extends React.Component {
  render() {
    const { data } = this.props;
    return <span>{data.id}</span>;
  }
}

class MyList extends React.Component {
  state = {
    index: 0
  };

  onPrevClick = () => {
    const { index } = this.state;
    if (index > 0) this.setState({ index: index - 1 });
  };

  onNextClick = () => {
    const { data } = this.props;
    const { index } = this.state;
    if (index < data.length - 1) this.setState({ index: index + 1 });
  };

  render() {
    const { data } = this.props;
    const { index } = this.state;
    return (
      <>
        <span onClick={this.onPrevClick}>prev</span>
        <MyComp data={data[index]} />
        <span onClick={this.onNextClick}>next</span>
      </>
    );
  }
}

类MyComp扩展了React.Component{
render（）{
const{data}=this.props；
返回{data.id}；
}
}
类MyList扩展了React.Component{
状态={
索引：0
};
onPrevClick=（）=>{
const{index}=this.state；
if（index>0）this.setState（{index:index-1}）；
};
onNextClick=（）=>{
const{data}=this.props；
const{index}=this.state；
if（index

---

我的英语不好，但我想你会明白这一点的。。。 变量名称是随机的，因为我不是一个有组织的人，但你可以修复它

import React, { Component } from 'react'; import { render } from 'react-dom'; import Hello from './Hello'; import './style.css';

class App extends Component {   constructor() {
    super();
    this.arr = [
    { start: 10, end: 12, id: 7532 },
    { start: 11, end: 13, id: 6775 },
    { start: 14, end: 15, id: 554 },
    { start: 17, end: 18, id: 3232 } ];   this.h1 = document.createElement("h1")   }   componentDidMount(){
    this.h1.innerText = this.arr[0].id
    document.body.appendChild(this.h1)
    document.getElementById("back").disabled = true
    this.numbe = {
      number: 0,
      change: function(number){
        this.number = number
      }
    }
    }   render() {
    return (
      <div>   <button onClick={() => this.ir("back")} id="back">Back</button>   <button onClick={() => this.ir("foward")} id="foward">Foward</button>

      </div>
    );   }   ir(teste){
    if(parseInt(this.h1.innerText) === this.arr[this.arr.length - 2].id){
      document.getElementById("foward").disabled = true
    }
    else{
      document.getElementById("foward").disabled = false
      document.getElementById("back").disabled = false
    }
    if(parseInt(this.h1.innerText) === this.arr[1].id){
      document.getElementById("back").disabled = true
    }
    else{
      document.getElementById("back").disabled = false
      document.getElementById("back").disabled = false
    }
    if(teste === "foward"){
        var result = this.numbe.number + 1
        this.numbe.change(result)
        this.h1.innerText = this.arr[this.numbe.number].id
    }
    else{

        var result = this.numbe.number - 1
        this.numbe.change(result)
        this.h1.innerText = this.arr[this.numbe.number].id
    }   } }

render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；从'react dom'导入{render}；从“./Hello”导入Hello；导入“/style.css”；
类应用程序扩展组件{constructor（）{
超级（）；
此.arr=[
{开始：10，结束：12，id:7532}，
{开始：11，结束：13，id:6775}，
{开始：14，结束：15，id:554}，
{start:17，end:18，id:3232}]；this.h1=document.createElement（“h1”）}componentDidMount（）{
this.h1.innerText=this.arr[0].id
document.body.appendChild（this.h1）
document.getElementById（“back”）.disabled=true
此.number={
编号:0，
更改：功能（编号）{
这个数字=数字
}
}
}render（）{
返回(
this.ir（“back”）}id=“back”>back this.ir（“foward”）}id=“foward”>foward
);   }   ir（测试仪）{
if（parseInt（this.h1.innerText）==this.arr[this.arr.length-2].id）{
document.getElementById（“foward”）.disabled=true
}
否则{
document.getElementById（“foward”）.disabled=false
document.getElementById（“back”）.disabled=false
}
if（parseInt（this.h1.innerText）==this.arr[1].id）{
document.getElementById（“back”）.disabled=true
}
否则{
document.getElementById（“back”）.disabled=false
document.getElementById（“back”）.disabled=false
}
如果（测试仪==“向前”）{
var结果=this.number.number+1
此编号更改（结果）
this.h1.innerText=this.arr[this.number.number].id
}
否则{
var结果=this.number.number-1
此编号更改（结果）
this.h1.innerText=this.arr[this.number.number].id
}   } }
render（，document.getElementById（'root'））；

如果您遇到代码问题，请与他人分享您的代码。将所选索引保存到state可能是最好的解决方案。