ReactJS年份过滤功能实现求助：表单录入列表的年份筛选

1. 添加过滤年份的状态 #

在主组件（比如App）里新增状态存储选中的过滤年份，默认设为'all'表示显示全部数据：

const [filteredYear, setFilteredYear] = useState('all');

2. 添中年份选择UI #

在页面合适位置（比如表单下方、列表上方）加一个下拉选择框，绑定状态更新事件：

<div style={{ margin: '1rem 0' }}>
  <label>按年份筛选：</label>
  <select 
    value={filteredYear}
    onChange={(e) => setFilteredYear(e.target.value)}
    style={{ marginLeft: '0.5rem' }}
  >
    <option value="all">全部年份</option>
    {/* 动态生成已录入数据的唯一年份选项 */}
    {expenses.length > 0 && [...new Set(expenses.map(exp => new Date(exp.date).getFullYear().toString()))].map(year => (
      <option key={year} value={year}>{year}</option>
    ))}
  </select>
</div>

如果不想动态生成，也可以硬编码常用年份（比如2022、2023、2024）替换动态部分。

3. 编写过滤逻辑 #

在渲染列表前，对支出数据做过滤处理：

// 过滤出对应年份的数据
const filteredExpenses = filteredYear === 'all' 
  ? expenses 
  : expenses.filter(expense => {
      // 从支出日期中提取年份，这里假设date字段是可被Date解析的字符串
      const expenseYear = new Date(expense.date).getFullYear().toString();
      return expenseYear === filteredYear;
      // 如果你的date格式是YYYY-MM-DD，也可以用更高效的写法：
      // return expense.date.split('-')[0] === filteredYear;
    });

4. 渲染过滤后的列表 #

把原来渲染expenses的部分替换成filteredExpenses：

{filteredExpenses.map(expense => (
  <div key={expense.id} className="expense-item">
    <div>{expense.date}</div>
    <div>${expense.amount}</div>
    <div>{expense.description}</div>
  </div>
))}

注意事项 #

• 确保支出数据的date字段格式合法，能被new Date()正常解析，或者根据实际格式调整年份提取逻辑。
• 如果初始expenses为空，动态生成年份选项时的判断能避免报错。

内容的提问来源于stack exchange，提问作者ANANTHU C