Reactjs Маршрутизатор приводит к тому, что массив становится неопределенным

Question

Поэтому я пытаюсь получить JSON данных с сервера, работающего на другом порту в моем p c, используя ax ios, и отображает их на домашней странице. Я хочу настроить маршрутизатор для компонентов. Но всякий раз, когда я обертываю Router вокруг своих компонентов, это приводит к тому, что массив recipeslists становится undefined ( см. Ниже вывод консоли ), и, следовательно, я не могу map этот массив в моем 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

Выведите вышеуказанного кода в консоли:

Выведите в консоли без использования маршрутизатора:

Объясните мне,

• почему Маршрутизатор заставляет Array становиться неопределенным? или это еще одна ошибка, о которой я не знаю?
• Если это неправильная реализация или метод использования маршрутизатора в Reactjs, то как правильно это сделать?

Благодарю вас. Буду признателен за любую помощь!

Answer 1

Вместо использования component пропустите компонент как дочерний:

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

Это рекомендуемый способ рендеринга компонентов в маршруте.

Однако вы также можете использовать render, если хотите:

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

Вы просто не можете использовать опору component, потому что при этом вы только пропускаете компонент ссылка (Allrecipes), а не экземпляр (<Allrecipes />) компонента, которому можно передавать реквизиты.

Answer 2

Просто, когда вы используете маршрутизатор, вы не передаете список, а ваш компонент получает список из реквизита. в вашем коде это выглядит так:

Когда вы не используете маршрутизатор

<Allrecipes recipeslists={recipeslists} /> 

Когда вы используете маршрутизатор

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

Вы должны запрашивать данные внутри вашего компонента, а не получать их в качестве опоры.