React中实现轮播日期列的独立显示更多时段功能

你猜的没错，问题就是出在全局的useState状态上——所有日期列共用同一个isExpanded变量，一点击按钮就会把所有列的状态同时改掉。要实现独立控制，就得给每个日期分配专属的展开状态。

具体修改步骤： #

1. 把全局状态改成对象/数组：用每个日期的唯一标识（比如格式化后的日期字符串）作为键，存储该日期的展开状态，默认都设为false（即默认只显示前2个时段）。
2. 修改点击事件逻辑：点击按钮时，只切换当前日期对应的状态，不影响其他日期。
3. 渲染时段时匹配对应状态：根据当前日期的展开状态，决定显示全部3个时段还是前2个。

修改后的示例代码（React）： #

import moment from 'moment';
import { useState } from 'react';

const DateCarousel = () => {
  // 生成10个日期（示例）
  const dates = Array.from({ length: 10 }, (_, i) => moment().add(i, 'day').toDate());
  // 早中晚三个时段
  const timeSlots = ['早', '中', '晚'];

  // 初始化每个日期的展开状态，用格式化后的日期字符串当键
  const [expandedStates, setExpandedStates] = useState(() => {
    return dates.reduce((acc, date) => {
      const dateStr = moment(date).format('YYYY-MM-DD');
      acc[dateStr] = false;
      return acc;
    }, {});
  });

  // 切换单个日期的展开状态
  const toggleExpand = (dateStr) => {
    setExpandedStates(prev => ({
      ...prev,
      [dateStr]: !prev[dateStr]
    }));
  };

  return (
    <div className="carousel">
      {dates.map(date => {
        const dateStr = moment(date).format('YYYY-MM-DD');
        const isExpanded = expandedStates[dateStr];
        return (
          <div className="date-column" key={dateStr}>
            <h3>{dateStr}</h3>
            {/* 根据当前日期的展开状态截取时段 */}
            {timeSlots.slice(0, isExpanded ? 3 : 2).map(slot => (
              <div className="time-slot" key={slot}>{slot}</div>
            ))}
            <button onClick={() => toggleExpand(dateStr)}>
              {isExpanded ? 'Show Less' : 'Show More'}
            </button>
          </div>
        );
      })}
    </div>
  );
};

export default DateCarousel;

关键说明： #

• 用expandedStates对象存储每个日期的独立状态，避免全局状态的污染。
• toggleExpand函数只修改当前点击日期对应的状态，通过扩展运算符拷贝原状态对象，保证状态更新的不可变性。
• 每个日期列的key用格式化后的日期字符串，确保React能正确识别每个组件的唯一性。

内容的提问来源于stack exchange，提问作者Vivek Gupta