如何显示 json 中满足条件的特定数据？

Question

我正在尝试显示特定名称菜单的特定数据。例如：/menu/${menuId}/{row.name}（这里例如 menuId= "Menu1" 和 row.name= "Pea Soup"）。我想从我的 match.json 中获取所有信息（在 <div> 或 <p> 中对应于豌豆汤，例如当我点击“豌豆汤”时。

export default function MenuDisplay() {
  const { menuId } = useParams();
  const { match } = JsonData;

  const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];

  const data = useMemo(
    () => [
      {
        Header: "Name",
        accessor: (row) => (
          <Link to={{ pathname: `/menu/${menuId}/${row.name}` }}>
            {row.name}
          </Link>
        )
      }, ...

我可以显示 match.json 的所有内容，但不能显示特定菜单选择...

代码如下：sandbox_link

Answer 1

您可以像我们为 MenuDisplay table 页面那样构建另一个页面。使用路由参数中的 menuId 和新的 itemId 再次 search/find matches.json 数据。

示例：

function MenuDisplay() {
  const { menuId, itemId } = useParams();
  const { match } = JsonData;

  const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];
  const item = matchData.find((el) => el._id === itemId);

  return (
    <>
      <h1>Menu Item</h1>
      <div>
        <p>Name: {item.name}</p>
        <p>Description: {item.description}</p>
        <p>Dishes: {Object.values(item.dishes[0]).join(", ")}</p>
      </div>
    </>
  );
}

修复 link 以使用 link 编辑到的菜单项的项目 ID。

accessor: (row) => (
  <Link to={{ pathname: `/menu/${menuId}/${row._id}` }}>
    {row.name}
  </Link>
)

添加一个路由来处理渲染这个新的 MenuItemDisplay 组件。

<Routes>
  <Route path="/menu" element={<Display />} />
  <Route path="/menu/:menuId" element={<MenuDisplay />} />
  <Route path="/menu/:menuId/:itemId" element={<MenuItemDisplay />} />
  <Route path="*" element={<Error />} />
</Routes>

如何显示 json 中满足条件的特定数据？

How do I display specific data from json that fulfill a condition?

html

javascript

reactjs

react-router

react-hooks