如何通过React中的Link传递道具(this.props.location未定义)

Question

我正在react中创建一个配方研究项目。在主页上，我按下"搜索配方"，它会为我找到它们，然后"查看配方"，会显示一些我必须决定的数据。当我在组件中执行console.log(this.props(时，它会返回所有没有状态值的对象，因此我无法访问数据。你能帮帮我吗？我把代码留给你，让你更好地理解。

import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";
import MealList from "./MealList";
function App() {
const [mealData, setMealData] = useState(null);
/*const [calories, setCalories] = useState(2000)*/
const [food, setFood] = useState("");
function handleChange(e) {
setFood(e.target.value);
}
function getMealData() {
fetch(
`https://api.spoonacular.com/recipes/complexSearch?apiKey=1d66c25bc4bb4ac288efecc0f2c4c4b8&diet=vegetarian` 
) /* &addRecipeInformation=true */
.then((response) => response.json())
.then((data) => {
setMealData(data);
})
.catch(() => {
console.log("error");
});
}
return (
<div className="App">
<section className="controls">
{/*<input type="number" placeholder='Calories (e.g. 2000)' onChange={handleChange}/>*/}
<input type="string" placeholder="food" onChange={handleChange} />
</section>
<button onClick={getMealData}> CERCA PASTI VEGETARIANI</button>
{mealData && <MealList mealData={mealData}/>}
</div>
);
}
export default App;

import React from "react";
import Meal from "./Meal";
export default function MealList({ mealData }) {
return (
<main>
<section className="meals">
{mealData.results.map((meal) => {
return <Meal key={meal.id} meal={meal} />;
})}
</section>
</main>

)；}

import React, {useState, useEffect} from 'react'
import {Link} from 'react-router-dom'
export default function Meal({meal}) {

const [imageUrl, setImageUrl] = useState("");
useEffect(()=>{
fetch(`https://api.spoonacular.com/recipes/${meal.id}/information?apiKey=1d66c25bc4bb4ac288efecc0f2c4c4b8`)
.then((response)=>response.json())
.then((data)=>{
setImageUrl(data.image)
})
.catch(()=>{
console.log("errorn in meal js fetch")
})
}, [meal.id])
const location = {
pathname: '/somewhere',
state: { fromDashboard: true }
}
return (
<article>
<h1>{meal.title}</h1>
<img src={imageUrl } alt="recipe"></img>
<div>
<button className='recipeButtons'>
<Link to={{
pathname: `/recipe/${meal.id}`, 
state: {meal: meal.id}}}>
Guarda Ricetta
</Link>
</button>
</div>
</article>
)
}

import React from "react";
class Recipe extends React.Component{

render() {
console.log(this.props)
return(
<div>class Recipe extends React.Component</div>
)
}
}

export default Recipe;

这是console.log(this.props((this.rops.location未定义(的结果：这支持

Answer 1

您还没有展示如何渲染<配方/>，所以我一眼就看不出问题出在哪里。

不过，您不需要将位置作为道具进行传递。React Router包括一个钩子useLocation，它可以从任何功能组件调用。您可以将Recipe更改为功能组件并使用：

import { useLocation } from 'react-router-dom'
/* ... */
function Recipe(props) {
const location = useLocation()
/* ... */
}

ETA:

检查<Link/>和To的类型定义时，reactourter.com上的API引用似乎是错误的。To实际上是string | Partial<Path>，其中Path是：

interface Path {
/**
* A URL pathname, beginning with a /.
*
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#location.pathname
*/
pathname: Pathname;
/**
* A URL search string, beginning with a ?.
*
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#location.search
*/
search: Search;
/**
* A URL fragment identifier, beginning with a #.
*
* @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#location.hash
*/
hash: Hash;
}

这就是为什么从未设置状态的原因。要设置链接中的状态，您需要将其作为React道具，如下所示：

<Link to={`/recipe/${meal.id}`} state={{ meal: meal.id }}>Guarda Ricetta</Link>

Answer 2

您可以使用带有react路由器挂钩的功能组件来访问位置，而不是类组件

import { useLocation } from "react-router-dom";
export default function Recipe () {
const location  = useLocation();
return (
<div> Recipe </div
)
}