如何通过链接传递道具

Posted 2023-02-22

【中文标题】如何通过链接传递道具

【英文标题】：How to pass props through Link

【发布时间】：2022-01-19 05:01:33

【问题描述】：

在这里做出反应是相当新的。我正在制作一个带有 api 的小型食谱查找器应用程序。获取数据后，我正在映射结果并将它们显示在组件中。我想要做的是通过另一条路线中的另一个组件显示每个配方的详细信息。我不知道该怎么做。我以为我可以通过 Link 传递映射的配方，但它不起作用。这是我目前所拥有的。

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import  BrowserRouter as Router  from 'react-router-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <Router>
    <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import React,  useState, useEffect from "react";
import axios from "axios";
import  BrowserRouter as Router, Routes, Route, useNavigate from "react-router-dom";
import "./App.css";
import RecipeList from "./RecipeList";
import Recipe from "./Recipe";
import Header from "./Header";

function App() 
  const navigate = useNavigate();
  
  const [recipes, setRecipes] = useState([]);
  const [query, setQuery] = useState("");
  const [search, setSearch] = useState("");
  const APP_ID = "XXXXXXXXX";
  const APP_KEY = "XXXXXXXXXXXXXXXXXXXXXX";
  const url = `https://api.edamam.com/api/recipes/v2?type=public&q=$query&app_id=$APP_ID&app_key=$APP_KEY`;

  const getRecipes = async () => 
    const res = await axios(url);
    const data = await res.data.hits;
    console.log(data);
    setRecipes(data);
  ;
  useEffect(() => 
    getRecipes();
  , [query]);

  const updateSearch = (e) => 
    setSearch(e.target.value);
    console.log(search);
  ;

  const getSearchQuery = (e) => 
    e.preventDefault();
    setQuery(search);
    setSearch("");
    navigate("/recipes");
  ;

  return (
    <div className="App">
      <Header />
      <div>
        <div className="container">
          <form className="search-form" onSubmit=getSearchQuery>
            <input
              className="search-input"
              type="text"
              value=search
              onChange=updateSearch
              placeholder="search by food name"
            />
          </form>
        </div>
      </div>

        <Routes>
          <Route path="/recipes" element=<RecipeList recipes=recipes /> />
          <Route path="/recipes/:id" element=<Recipe recipes=recipes />/>
        </Routes>
    
    </div>
  );


export default App;  

RecipeList.jsx

import React from "react";

import  Link  from "react-router-dom";

const RecipeList = ( recipes ) => 
  return (
    <div className="container">
      <div className="grid-container">
        recipes.map(( recipe ) => (
          <Link to=`/recipes/$recipe.label`>
            <img key=recipe.image src=recipe.image  />
            <p key=recipe.label>recipe.label</p>
            <p>recipe.id</p>
          </Link>
        ))
      </div>
    </div>
  );
;

export default RecipeList;

食谱.jsx

const Recipe = (recipe) => 

    return (
        <div>
            <h1>recipe.label</h1>
        </div>
    )


export default Recipe

我还接近吗？？？

【参考方案1】：

您将整个 recipes 数组传递给两个路由组件。

<Routes>
  <Route path="/recipes" element=<RecipeList recipes=recipes /> />
  <Route path="/recipes/:id" element=<Recipe recipes=recipes />/>
</Routes>

所以Recipe 可以使用整个数组和id 路由匹配参数来搜索传递的数组并通过匹配label 来呈现确切的配方。

import  useParams  from 'react-router-dom';

const Recipe = ( recipes ) => 
  const  id  = useParams();
  const recipe = recipes.find(recipe => recipe.label === id); // *

  return recipe ? (
    <div>
      <h1>recipe.label</h1>
    </div>
  ) : null;
;

* 注意：由于您将路由参数称为id，因此链接的recipe.id 对我们来说可能更有意义。

recipes.map(( recipe ) => (
  <Link to=`/recipes/$recipe.id`>
    <img key=recipe.image src=recipe.image  />
    <p key=recipe.label>recipe.label</p>
    <p>recipe.id</p>
  </Link>
))

...

const recipe = recipes.find(recipe => recipe.id === id);

【讨论】：

嘿德鲁，再次感谢您的帮助！实际上，我可以在这个 api 中找到任何 id。我只是使用 :id ，因为那是我通常会使用的。对不起，应该更清楚。

@RRhodes 不用担心。任何可以轻松字符串化到 URL 的唯一属性值都应该有效。

知道了！必须做更多的解构才能使其工作，但它现在工作得很好。谢谢德鲁！