React Router Lodash助手功能

Question

I'm using react-router to route to /products/:id the id of a local data file, I'm using lodash helper to mach the URL params with the id of the data file, I get an error (TypeError: Cannot read property 'description' of undefined) when I navigate to "/products/124", I think the problem is in the lodash find helper function

EachProject.js

import React, { Component } from 'react';
import find from 'lodash/find';
import { Link } from 'react-router-dom';
import './EachProject.css';
import PRODUCTS from '../../Data/CarouselData.js';

class EachProject extends Component {
  render() {
const product = find(PRODUCTS, ['id', 
parseInt(this.props.match.params.id)]);
const currentProduct = product;
return (
  <div>
    <h3 id="product-name">{currentProduct.description}</h3>
  </div>
    );
  }
}

export default EachProject; 

CarouselData.js

const products = [
  {
    id: "124",
    description:"garden and terrace duplexes and Gourmet Bazaar opened on the shore. Art Street, Performance Square.",
    types: "2+1, 3+1",
    area:"91m - 171m",
    priceMin:"330,000 TL",
    priceMax:"535,000 TL",
    location: "Esenyurt, Istanbul",
    status: "Under Construction",
    installment: "36",
    deliveryDate: "2018",
    deliveryDateAr: "2018",
    downPayment: "30",


  }

]



export default products;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import App from './App';

import Services from './components/Routes/Services/Services.js';
import About from './components/Routes/About/About.js';
import Contact from './components/Routes/Contact/Contact.js';
import Projects from './components/Routes/Projects/Projects.js';
import registerServiceWorker from './registerServiceWorker';
import EachProject from './components/Routes/EachProject/EachProject.js';



ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route exact path="/products/:id" component={EachProject} />
      <Route path="/projects" component={Projects} />
      <Route path="/contact" component={Contact} />
      <Route path="/about" component={About} />
      <Route path="/services" component={Services} />

      <Route path="/" component={App} />

    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
);
registerServiceWorker();

Answer 1

尽管ID是对象中的字符串，但由于某种原因您仍在解析为int：

const product = find(PRODUCTS, { id: this.props.match.params.id });