ReactJS技术问询：外部JSON遍历与日期计数器逻辑实现

嘿，我来帮你搞定这两个React问题，咱们一个个来：

其实步骤很简单，主要分两步：导入JSON文件，然后用React常用的map方法遍历数据就行。

步骤1：导入外部JSON文件 #

假设你的JSON文件名叫slots.json，和你的React组件在同一目录下，直接用ES模块导入语法就行：

import slotsData from './slots.json';

React会自动帮你解析JSON内容，转换成JavaScript对象。

步骤2：遍历数据并渲染 #

比如你想把所有日期都列出来，或者用它作为你的数据源，在函数组件里可以这么写：

import React from 'react';
import slotsData from './slots.json';

function DateList() {
  return (
    <div>
      <h3>所有可用日期</h3>
      <ul>
        {/* 用map遍历available_slots数组，记得加key属性 */}
        {slotsData.available_slots.map((slot, index) => (
          <li key={index}>{slot.date}</li>
        ))}
      </ul>
    </div>
  );
}

export default DateList;

这里要注意，遍历列表时必须给每个子元素加唯一的key属性，React靠它来高效更新DOM。如果你的slot对象里有唯一ID（比如id字段），用那个当key比index更好。

这个需求核心是用状态管理当前选中的日期索引，然后控制加减按钮的逻辑不超出数组边界，同时同步更新输入框的内容。咱们用React的useState钩子来实现：

完整组件示例 #

import React, { useState } from 'react';
import slotsData from './slots.json';

function DateCounter() {
  // 初始化当前索引为0，对应第一个日期
  const [currentIndex, setCurrentIndex] = useState(0);
  // 获取当前选中的日期
  const currentDate = slotsData.available_slots[currentIndex].date;

  // 递增逻辑：不能超过数组最后一个索引（这里是6，因为数组长度7，索引从0开始）
  const handleIncrement = () => {
    if (currentIndex < slotsData.available_slots.length - 1) {
      setCurrentIndex(prevIndex => prevIndex + 1);
    }
  };

  // 递减逻辑：不能小于0
  const handleDecrement = () => {
    if (currentIndex > 0) {
      setCurrentIndex(prevIndex => prevIndex - 1);
    }
  };

  return (
    <div className="date-counter">
      <button onClick={handleDecrement} disabled={currentIndex === 0}>-</button>
      <input 
        type="text" 
        value={currentDate} 
        readOnly  {/* 输入框设为只读，避免用户手动修改 */}
      />
      <button onClick={handleIncrement} disabled={currentIndex === slotsData.available_slots.length - 1}>+</button>
    </div>
  );
}

export default DateCounter;

关键细节说明： #

• 用useState维护currentIndex状态，确保索引变化时组件重新渲染，更新输入框内容。
• 加减按钮的逻辑里加了边界判断：递增时不能超过available_slots.length - 1（也就是6），递减时不能小于0。
• 给按钮加了disabled属性，当到达边界时按钮变灰不可点击，用户体验更好。
• 输入框设置为readOnly，防止用户手动修改日期，保证数据和索引同步。

这样就能完美实现你要的功能啦，初始显示第一个日期，点击+/-切换，到边界就不能再动了～

内容的提问来源于stack exchange，提问作者water man