如何筛选JSON数据获取指定日期菜单？React美食App筛选问题

我看了你的代码和JSON结构，问题主要出在字段名不匹配、筛选时机错误和筛选条件写错这几个地方，下面一步步给你修正：

核心问题拆解 #

1. 字段名完全不匹配：你的JSON里是Weekday（星期）和Dishes（菜品数组），但代码里却用Day、Dish来解构，这直接导致你没法正确拿到数据。
2. 先map后filter搞反了顺序：你先把所有数据转换成React元素，再去筛选元素——但元素里已经没有原始的星期字段了，自然筛不出想要的结果。应该先筛选原始数据，再把筛选后的结果转换成元素。
3. 筛选条件错误：你写的Day["Gerichte"]是个不存在的字段，而且this.currentWeekday应该是this.state.weekday（你state里定义的是weekday）。
4. 缺少Axios获取数据的逻辑：你提到用Axios拿本地JSON，但代码里没写这部分，导致foodData一直是空数组，没法渲染数据。

修正后的完整代码 #

import React, { Component } from 'react';
import axios from 'axios';

class Menu extends Component{
  constructor(){
    super()
    this.state={
      foodData: [],
      // 可以改成自动获取当前星期：new Date().toLocaleDateString('en-US', {weekday: 'long'})
      weekday: "Friday", 
    }
  }

  // 组件挂载时加载本地JSON数据
  componentDidMount() {
    axios.get('/path/to/your/menu.json') // 替换成你的JSON文件实际路径
      .then(response => {
        this.setState({ foodData: response.data });
      })
      .catch(error => {
        console.error('菜单数据加载失败:', error);
      });
  }

  render(){
    // 第一步：先从原始数据筛选出目标星期的菜单
    const targetMenu = this.state.foodData.filter(item => item.Weekday === this.state.weekday);
    
    // 第二步：把筛选后的结果转换成React元素
    const todaysMenu = targetMenu.map(({ Weekday, Dishes }, index) => {
      return (
        <div key={index}>
          <h2 className="day" >{Weekday}</h2>
          <ul> {/* 补充ul标签，符合HTML语义规范 */}
            {Dishes.map((dish, index2) => {
              return (
                <li key={index2} className="Menu">
                  {dish.Name} {dish.Price}
                </li>
              );
            })}
          </ul>
        </div>
      );
    })

    return (
      <div>{todaysMenu}</div> {/* 用div代替label，更符合组件语义 */}
    )
  }
}

export default Menu;

额外优化建议 #

• 想要自动匹配当前日期的话，把state里的weekday替换成：

  weekday: new Date().toLocaleDateString('en-US', {weekday: 'long'})
  

  这样会自动获取系统当前的星期名称，不用手动修改。
• 变量名尽量统一：比如菜品用小写dish，和数组Dishes区分开，代码可读性更好。

内容的提问来源于stack exchange，提问作者Michael NJ