MenusShow.jsx 不显示 React 道具

Question

我正在使用 React 作为我的前端框架构建一个菜单规划应用程序。我为食谱构建了 CRUD 操作，并有一个索引和显示页面。每个 RecipesShow 页面上还有一个选项可将菜谱添加到菜单中。我还构建了 MenusIndex 和 MenusShow 页面。除了 MenusShow 页面之外，一切都工作正常。由于某种原因，来自后端的数据没有显示在该页面上，我不确定问题是什么。后端与menus.json一起正常工作。我知道前端正在接收后端数据，因为其余数据正在正确显示。我知道

MenusShow.jsx

的 HTML 正在运行，因为它显示“没有可用数据”。当我转到 currentMenu 页面时，地址栏中会显示正确的菜单 ID，因此我知道 currentMenu 函数正在运行。这是我的

MenusShow.jsx

和

Content.jsx

文件中的相关代码：

MenusShow.jsx

import { useParams } from "react-router-dom";

export function MenusShow(props) {
  const { menuId } = useParams();

  console.log("MenusShow menuId:", menuId);
  console.log("MenusShow props:", props);

  if (!props.menu || !props.menu.event || !props.menu.recipe) {
    console.log("No data available for menuId", menuId);
    //Handle the  case where the data is not available
    return <div>No data available</div>;
  }
  const { event, recipe } = props.menu;

  return (
    <div>
      <h3>{event.title}</h3>
      <h3>Recipes:</h3>
      <p>{recipe.title}</p>
    </div>
  );
}

Content.jsx

import axios from "axios";
import { useState, useEffect } from "react";
import { Routes, Route } from "react-router-dom";
import { MenusIndex } from "./MenusIndex";
import { MenusShow } from "./MenusShow";
...

export function Content() {
...
// MenusIndex function
  const handleIndexMenus = () => {
    console.log("handleIndexMenus");
    axios.get("http://localhost:3000/menus.json").then((response) => {
      console.log(response.data);
      setMenus(response.data);
    });
  };
  useEffect(handleIndexMenus, []);

  // MenusShow function
  const [menus, setMenus] = useState([]);
  // const [isMenusShowVisible, setIsMenusShowVisible] = useState(false);
  const [currentMenu, setCurrentMenu] = useState({});

  const handleShowMenu = (menu) => {
    console.log("handleShowMenu", menu);
    // setIsMenusShowVisible(true);
    setCurrentMenu(menu);
  };
return (
    <div className="container">
      <Routes>
...
<Route
          path="/menus"
          element={
            <MenusIndex
              menus={menus}
              onShowMenu={handleShowMenu}
            />
          }
        />
        <Route path="/menus/:menuId" element={<MenusShow menu={currentMenu} />} />
      </Routes>
...
    </div>
  );
}

为了尝试找出问题发生的位置，我将当前菜单 ID 以及 MenusShow 中的道具记录到控制台。菜单 ID 有效，但后端数据的道具似乎没有在 MenusShow 中显示。控制台或终端中没有错误。

Answer 1

你可以试试这个吗：

<Route
  path="/menus/:menuId"
  render={(props) => <MenusShow {...props} menu={currentMenu} />}
/>

https://github.com/rohan-paul/Awesome-JavaScript-Interviews/blob/master/React/pass-prop-to-component-rendered-by-React-Router.md