Question

我制作了2个按钮和一个输入字段。按钮（+/-）用于递增和递减计数器。最初，输入字段包含日期，即data.available_slots[0].date

当我点击+按钮增加时，日期会从Wed, Dec 06动态变为Thur, Dec07到Fri, Dec08，依此类推到最后一个日期，即Wed, Dec13。

JSONdata的长度是7，即data.available_slots[0].date到data.available_slots[6].date，所以当计数器达到6时，它不应该进一步递增，如果计数器递减，那么它不应该低于0。

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

查看各种截图，点击按钮在输入字段https://imgur.com/a/aek4e

中显示各种日期

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;

data.js：

const data = {
        "template_type": "slot_picker",
        "selection_color": "#000000",
        "secondary_color": "#808080",
        "title": "Available Slots for Dr. Sumit",
        "available_slots": [
          {
            "date": "Wed, Dec 06",
            "date_slots": [

            ]
          },
          {
            "date": "Thu, Dec 07",
            "date_slots": [

            ]
          },
          {
            "date": "Fri, Dec 08",
            "date_slots": [

            ]
          },
          {
            "date": "Sat, Dec 09",
            "date_slots": [

            ]
          },
          {
            "date": "Today",
            "date_slots": [
              {
                "hour": "8",
                "hour_slots": [
                  {
                    "08:10 AM": "slotId001"
                  },
                  {
                    "08:50 AM": "slotId005"
                  }
                ]
              },
              {
                "hour": "3",
                "hour_slots": [
                  {
                    "03:00 PM": "slotId005"
                  },
                  {
                    "03:30 PM": "slotId007"
                  }
                ]
              }
            ]
          },
          {
            "date": "Tomorrow",
            "date_slots": [

            ]
          },
          {
            "date": "Wed, Dec 13",
            "date_slots": [
              {
                "hour": "4",
                "hour_slots": [
                  {
                    "04:30 PM": "slotId105"
                  },
                  {
                    "04:50 PM": "slotId106"
                  }
                ]
              },
              {
                "hour": "5",
                "hour_slots": [
                  {
                    "05:30 PM": "slotId202"
                  },
                  {
                    "05:45 PM": "slotId208"
                  }
                ]
              }
            ]
          }
        ]
      };

 export default data;

enter image description here

Answer 1

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

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

或者

increment(){
    this.setState(prevState => ({
        counter: prevState.counter < 6? (prevState.counter+1): prevState.counter
    }));
}

Answer 2

Authorization

Answer 3

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

例如，在渲染功能中，您可以执行以下操作：

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

Answer 4

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

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

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

4 个答案: