Передача данных из одного JSON файла из родительского в дочерний компонент в React с использованием динамических c маршрутов

Question

Я пытаюсь создать проект, использующий динамические маршруты React c. По сути, мой проект делает это: когда я нажимаю на страницу магазина, локальные файлы JSON отображаются в компоненте магазина, затем, когда я нажимаю на элемент из компонента магазина, создается динамический маршрут c и отображаются соответствующие данные.

Например: вместо отображения текста «Описание заполнителя» я хочу отобразить описание автомобилей. В случае с Ford KA я хочу, чтобы он отображал «Mini», для Ford Fiesta - «Хэтчбек» и т. Д.

Как передать эти данные из родительского в дочерний компонент? Я посмотрел на Google, и некоторые учебники используют два API: они сравнивают идентификатор одного API, который содержит список элементов, с идентификатором другого API, который содержит детали элемента. Проблема в том, что я не думаю, что смогу сделать это с локальным файлом JSON. Я попытался передать некоторые данные в качестве реквизитов из компонента Shop в ShopItems, но мой код вызвал множество ошибок в консоли, поэтому я в итоге стер этот код, чтобы снова сделать его функционалом.

Вот мой код и a CodeSandbox ссылка :

Приложение. js

import React from 'react';
import './App.sass';
import Nav from './components/Nav';
import About from './components/About';
import Shop from './components/Shop';
import ShopItem from './components/ShopItem';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Nav />
        <Switch>
          <Route path='/' exact component={Home}/>
          <Route path='/about' component={About} />
          <Route path='/shop' exact component={Shop} />
          <Route path='/shop/:id' component={ShopItem} />
        </Switch>
      </div>
    </Router>
  );
}

const Home = () => {
  return (
  <div>
    <h1>Home Page</h1>
  </div>
)};

export default App;

Nav. js

import React from 'react';
import '../App.sass';
import { Link } from 'react-router-dom';
function Nav() {

  const navStyle = {
    color: 'white'
  };
  return (
    <div>
      <nav>
        <Link to='/'>
          <h3> Logo </h3>
        </Link>
        <ul className='nav-links'>
          <Link style={navStyle} to='/about'>
            <li>About</li>
          </Link>
          <Link style={navStyle} to='/shop'>
            <li>Shop</li>
          </Link>
        </ul>
      </nav>
    </div>
  );
}

export default Nav;

Nav.sass

nav
  display: flex
  justify-content: space-around
  align-items: center
  min-height: 10vh
  background: gray
  .nav-links
    width: 50%
    display: flex
    justify-content: space-around
    align-items: center
    list-style: none

Shop. js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Shop extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {

  fetch('./data.json')
  .then((res) => res.json())
  .catch(err => console.log(err))
  .then((data) => {
    //console.log('data:', data);
    this.setState({
      data: data
    })
  })
}

  render() {
    const { data } = this.state
    return (
      <div>
        {data.map(data =>
          <h1>
            <Link to={`/shop/${data.id}`}>{data.name}</Link>
          </h1>)}
      </div>
    )
  }
}

export default Shop;

ShopItem. js

import React, { Component } from 'react';
class ShopItem extends Component {

  render() {
    return(
      <div>Description Placeholder</div>
    )
  }
}

export default ShopItem;

data. json

[{"id": 1,"name": "Ford Ka", "description": "Mini"},
{"id": 2, "name": "Ford Fiesta", "description": "Hatchback"},
{"id": 3, "name": "Ford Focus", "description": "Hatchback"},
{"id": 4, "name": "Ford Mondeo", "description": "Sedan"}
]

Answer 1

Вам нравится

class ShopItem extends Component {

  constructor(props) {
    super(props);
    this.state = {
      detail: {}
    };
  }

  componentDidMount() {

// получение значения параметра params здесь

 let id = this.props.match.params.redirectParam;
  fetch('./data.json')
  .then((res) => res.json())
  .catch(err => console.log(err))
  .then((data) => {

   ****// Updated filter to find the Id here****

    this.setState({
      detail: data.find(data => data.id === id);
    })
  })
}
 render() {
    return(
      <div>{this.state.detail.description}</div>
    )
  }
}