Я не могу передать свой реквизит через Route render

Question

Я сталкиваюсь с вопросом "Не могу прочитать свойство 'карта' неопределенной". Я планирую создать компонент «Избранное» и передать те же реквизиты, которые получает «AllProducts». Я покажу их в компоненте «Избранное» в соответствии с их пропуском «isSelected».

import React from 'react';
import { Route, Switch } from 'react-router-dom'

import Navigation from './components/Navigation';
import AllProducts from './components/AllProducts/AllProducts';
import Favourites from './components/Favourites'

import './App.css';

function App() {
  return (
    <div className="App">
      <Navigation />
      <Switch>
        <Route path='/favourites' component={Favourites} />
        <Route path='/' ecaxt render={(props) => <AllProducts {...props} />} />
      </Switch>
    </div>
  );
}

export default App;

Мой компонент контейнера.

 import React, { useState } from 'react';

    import AllProducts from '../../components/AllProducts/AllProducts'

    const ProductBuilder = (props) => {
      const [products, setProducts] = useState([
        { id: 0, title: 'Red Scarf', content: 'A pretty red scarf.', isSelected: false },
        { id: 1, title: 'Blue T-Shirt', content: 'A pretty blue t-shirt.', isSelected: false },
        { id: 2, title: 'Green Trousers', content: 'A pair of lightly green trousers.', isSelected: false },
        { id: 3, title: 'Orange Hat', content: 'Street style! An orange hat.', isSelected: false }
      ])

      const buttonClickHandler = (id) => {
        const cloneProducts = [...products];
        const cloneElement = { ...cloneProducts[id] };
        cloneElement.isSelected = !cloneElement.isSelected;
        cloneProducts[id] = cloneElement;
        setProducts(cloneProducts)
      }

      return (
        <div>
          <AllProducts products={products} buttonClickHandler={buttonClickHandler} />
        </div>
      );
    }

    export default ProductBuilder;

Мой компонент chlid, который не получает реквизиты.

import React from 'react';
import Product from '../Product'

const AllProducts = (props) => {

  let product = (
    props.products.map(prd => <Product
      key={prd.id}
      title={prd.title}
      content={prd.content}
      id={prd.id}
      isSelected={prd.isSelected}
      clicked={props.buttonClickHandler}
    />)
  )

  return (
    <div>
      {product}
    </div>
  );
}

export default AllProducts;

Мои навигационные ссылки

const Navigation = (props) => {
  return (
    <Nav>
      <Ul>
        <li><StyledNavLink to='/' exact  > All Products</StyledNavLink> </li>
        <li><StyledNavLink to='/favourites' > Favourites </StyledNavLink></li>
      </Ul>
    </Nav>
  );
}

Answer 1

Поведение, которое вы объяснили, ожидается относительно вашего кода. Обратите внимание, что со ссылкой на вас (я имею в виду вашу навигацию), когда вы нажимаете на тот, который указывает на All Products, вы отправляете только строковое имя пути и, следовательно, доступ к продукту будет нулевым (так как реквизиты products не отправляются). , Помните, что функция рендеринга реквизита маршрута имеет доступ ко всем одинаковым реквизитам маршрута (совпадение, местоположение и история), что означает передачу чего-то вроде продуктов по ссылке, которую вы либо захотите сделать, а не просто передать строку в to ссылки, но и подобного объекта

<Link to ={{pathname: '/', products: "Product array here"}} > All Product </Link>

Если это не так, то я думаю, что вы должны были использовать ProductBuilder в маршруте. Также рассмотрим реализацию ProductBuilder, которая работает, потому что вы просто передаете массив product как реквизиты компоненту AllProducts. Метод рендеринга React Router

Answer 2

Я думаю, что все, что вам нужно сделать, это убедиться, что props.products не определен перед использованием карты.

const AllProducts = (props) => {
  if(!props.products) return null;
  let product = (
    props.products.map(prd => <Product
      key={prd.id}