如何在React JS单个文件中定义两个const数组分别渲染早午餐菜单

问题根因 #

1. 导入导出不匹配：存储菜单数据的文件名为Note，你在组件中错误导入了不存在的./BreakfastMenu文件；且Note文件为默认导出对象，直接按变量名导入无法获取到对应数组。
2. 列表渲染未加唯一key：直接调用map渲染组件没有传入key属性，会触发React的渲染警告。

修复方案 #

方案1：保留现有默认导出的修改方式 #

1. 修正Breakfast组件代码

import React from 'react';
// 导入Note文件的默认导出对象
import menus from "./Note";
import Menu from "./Menu";

function nCard(val)
{
    return(
        <Menu
                key={val.id}
                h={val.h}
                p={val.p}
        />
    );
}
const Breakfast = (props) =>
{     
    // 从导出对象中取出早餐菜单数组
    return ( 
        menus.BreakfastMenu.map(nCard)
    )
}
export default Breakfast; 

2. 新增Lunch组件代码（和早餐逻辑一致）

import React from 'react';
import menus from "./Note";
import Menu from "./Menu";

function nCard(val)
{
    return(
        <Menu
                key={val.id}
                h={val.h}
                p={val.p}
        />
    );
}
const Lunch = (props) =>
{     
    return ( 
        menus.LunchMenu.map(nCard)
    )
}
export default Lunch; 

方案2：改为命名导出（更推荐的写法） #

1. 调整Note文件的导出方式

export const BreakfastMenu = [
  {
    id:1,
    h:"Eggs",
    p:"eggs",
  },
  {
    id:2,
    h:"Milk",
    p:"milk",
  }
]

export const LunchMenu = [
  {
    id:1,
    h:"Tomato",
    p:"eggs",
  },
  {
    id:2,
    h:"Milk",
    p:"milk",
  }
]

修改后可以直接按需导入对应菜单数组：

import { BreakfastMenu } from './Note'

点击链接切换菜单实现 #

在父组件（比如App.js）中添加状态控制渲染逻辑：

import React, { useState } from 'react'
import Breakfast from './Breakfast'
import Lunch from './Lunch'

function App() {
  // 可选值：'breakfast' / 'lunch'
  const [activeMenu, setActiveMenu] = useState('breakfast')

  return (
    <div className="App">
      {/* 切换链接 */}
      <div>
        <button onClick={() => setActiveMenu('breakfast')}>早餐菜单</button>
        <button onClick={() => setActiveMenu('lunch')}>午餐菜单</button>
      </div>
      {/* 条件渲染对应菜单 */}
      <div className="menu-content">
        {activeMenu === 'breakfast' ? <Breakfast /> : <Lunch />}
      </div>
    </div>
  )
}

export default App

内容的提问来源于stack exchange，提问作者Maryam Naveed