javascript - Reactjs Router 导致数组变得未定义

Question

因此，我尝试使用 axios 从在我的电脑另一个端口上运行的服务器获取 JSON 数据，并将其呈现在主页上。我想将路由器设置为组件。但是每当我将 Router 包裹在我的组件上时，它都会导致数组 recipeslists 变为 undefined (参见下面的控制台输出)并且因此我无法在我的 Allrecipes 组件中映射该数组，但如果没有任何路由器，它就可以正常工作。

App.js的代码如下

import React, { useState , useEffect} from 'react'
import { BrowserRouter as Router, Route } from "react-router-dom"
import "bootstrap/dist/css/bootstrap.min.css"

import Navbar from './components/Navbar'
import Allrecipes from './components/Allrecipes'
import Createrecipe from './components/Createrecipe'
import axios from 'axios'

const App = () => {
    const [recipeslists,setRecipes] = useState([])
    const [filterRecipe,setFilterRecipe] = useState([])
    const [search,setSearch] = useState('')
    console.log("in app")

    useEffect(()=>{
        console.log("useEffect")
        axios.get('http://localhost:3001/api/recipes')
        .then(response => {
            console.log(response.data)
            return response.data
        })
        .then( recipeslist => {
            console.log(recipeslist,"recipes")
            setRecipes(recipeslist)
            setFilterRecipe(recipeslist)
        })
        .catch((err) => console.log(err))
    },[])

    function handlechange(event){
        var query = event.target.value.toLowerCase()
        setSearch(query)

        var filter_recipes = filterRecipe.filter((recipe) =>
            recipe.dish_name.toLowerCase().includes(query)
        )

        setRecipes(filter_recipes)
    }


    return (
        <Router>
            <div className="container">
                <Navbar handlechange={handlechange}  search={search}/>
                <Allrecipes recipeslists={recipeslists} /> 
            </div>
            <Route path="/" exact component={Allrecipes} />
            <Route path="/recipes/create" exact component={Createrecipe} />
        </Router>
    )

}
export default App

Allrecipes.js代码如下

import React from "react"
import Recipe from './Recipe'

const Allrecipes = (props) => {
    const {recipeslists} = props
    console.log(recipeslists,"*** recipes array in Allrecipes***")

    return (
        <div className="recipecontainer">
               {recipeslists.map( recipeitem => <Recipe key={recipeitem.id} recipeitem={recipeitem} />)}
        </div>
    )
}

export default Allrecipes

上述代码在控制台中的输出:

在控制台中输出而不使用路由器:

解释一下，

• 为什么路由器会导致数组变得未定义？或者这是另一个我不知道的错误？
• 如果这是在 Reactjs 中使用 Router 的错误实现或方法，那么正确的方法是什么？

谢谢。我将不胜感激你的任何帮助!

Answer 1

而不是使用 component prop，将组件作为子组件传递:

<Route path="/" exact>
  <Allrecipes recipeslists={recipeslists} /> 
</Route>

那就是recommended way路由中渲染组件的数量。

但是，您也可以使用render如果您愿意:

<Route path="/" exact render={(routeProps) => {
  <Allrecipes recipeslists={recipeslists} {...routeProps} />
}} />

你就是不能使用component prop 因为这样你只传递一个组件引用 ( Allrecipes )，而不是你可以传递 props 的组件的实例 ( <Allrecipes /> )。