Javascript 如何在ReactJS中循环来自外部文件的JSON数据？

我有两个按钮和一个输入字段。按钮（+/-）用于递增和递减计数器。最初，输入字段包含日期，即

数据。可用插槽[0]。日期

当我通过点击+按钮增加时，日期会从2006年12月的星期三动态变化到2007年12月的星期四、星期五、星期八等最后一个日期，即星期三、星期十三等

JSONdata的长度为7，即

data.available_slots[0]。date

到

data.available_slots[6]。date

因此，当计数器达到6时，它不应进一步递增，如果计数器递减，则它不应低于0

但是现在，当计数器（索引）超出界限时，它会显示错误（参见屏幕截图）

查看各种屏幕截图，点击按钮可在输入字段中显示各种日期

datepicker.js：

import React, { Component } from 'react';
import data from './data';
import './datepicker.css';

class DatePicker extends Component {

  constructor(props){
    super(props);
     this.state = {
        counter:0
     };
   }

  increment(){
    this.setState({
      counter: this.state.counter + 1
    });
  }

  decrement(){
    if(this.state.counter > 0){
      this.setState(prevState => ({counter: prevState.counter-1}))
   }
  }


  render() {
    return (
      <div>
        <div id="center">
            <label for="name">Pick a Date </label>
            <p></p>
            <button type="button" className="btn btn-success" id="plus" onClick={this.increment.bind(this)}>+</button>
            <input type="text" id="date" value={data.available_slots[this.state.counter].date}/>
            <button type="button" className="btn btn-danger" id="minus" onClick={this.decrement.bind(this)}>-</button> 
        </div>
      </div>
    );
  }
}

export default DatePicker;

---

在增加计数器值之前，检查计数器值。像这样：

increment(){
    if(this.state.counter < 6)
        this.setState({
            counter: this.state.counter + 1
        });
}

increment（）{
if（this.state.counter<6）
这是我的国家({
计数器：this.state.counter+1
});
}

或

increment（）{
this.setState（prevState=>({
计数器：prevState.counter<6？（prevState.counter+1）：prevState.counter
}));
}

根据我收集的信息，您正试图阻止显示此错误。解决此问题的一个简单方法是，如果数据文件中没有更多日期，请禁用“加号”按钮

例如，在渲染函数中，可以执行以下操作：

render() {
    const maxDateIndex = data.available_slots.length - 1;
    return (
      <div>
        <div id="center">
          <label for="name">Pick a Date </label>
          <button
            disabled={this.state.counter >= maxDateIndex}
            type="button"
            className="btn btn-success"
            id="plus"
            onClick={this.increment.bind(this)}
          >
            +
          </button>
          <input
            type="text"
            id="date"
            value={data.available_slots[this.state.counter].date}
          />
          <button
            type="button"
            className="btn btn-danger"
            id="minus"
            onClick={this.decrement.bind(this)}
          >
            -
          </button>
        </div>
      </div>
    );
  }

render（）{
const maxDateIndex=data.available\u slots.length-1；
返回(
选择一个日期
=maxDateIndex}
type=“按钮”
className=“btn btn成功”
id=“plus”
onClick={this.increment.bind（this）}
>
+
-
);
}

我只想提一下，对于带有重置的增量，这非常有效：

this.setState({
   counter: (this.state.counter + 1) % data.available_slots.length
})

---

在返回之前，您可以测试输入值以抑制越界错误。检查是否（计数器>数据.可用\u插槽.长度），然后将计数器设置为默认值again@javedJSONdata的长度为7，即

数据。可用插槽[0]。日期
到
数据。可用插槽[6]
因此，当计数器达到6时，它不应进一步递增，如果计数器递减，则它不应低于0。如何处理此问题。@ladjzero JSONdata的长度为7，即
数据。可用的\u插槽[0]。日期
到
数据。可用的\u插槽[6].date
因此，当计数器达到6时，不应进一步递增，如果计数器递减，则不应低于0。如何处理此问题我认为这不是一个问题。你可以缩小你的问题。让count=（count+length）%length再返回。为什么不能小于7，为什么不能小于6？当我们想要在0,1,2,3,4,5,6之间迭代时，我们想要包括6。将为false）值不会增加，但如果使用，我建议使用
data.available_slots.length-1
而不是硬编码的
6
值，这样，当数据更改时，您就不必更新硬编码值。@TimNovis dude为什么要对我的答案发表评论，对您的回答发表评论op将收到通知：P
render() {
    const maxDateIndex = data.available_slots.length - 1;
    return (
      <div>
        <div id="center">
          <label for="name">Pick a Date </label>
          <button
            disabled={this.state.counter >= maxDateIndex}
            type="button"
            className="btn btn-success"
            id="plus"
            onClick={this.increment.bind(this)}
          >
            +
          </button>
          <input
            type="text"
            id="date"
            value={data.available_slots[this.state.counter].date}
          />
          <button
            type="button"
            className="btn btn-danger"
            id="minus"
            onClick={this.decrement.bind(this)}
          >
            -
          </button>
        </div>
      </div>
    );
  }

increment(){
    this.setState({
      counter: this.state.counter == data.available_slots.length ? 0 :  this.state.counter + 1
    });
  }

this.setState({
   counter: (this.state.counter + 1) % data.available_slots.length
})