Question

我使用react-router路由到/ products /：id本地数据文件的id，我使用lodash helper来使用数据文件的id加载URL params，I得到一个错误（TypeError：无法读取属性＆＃39; undefined的描述）当我导航到＆＃34; / products / 124＆＃34;时，我认为问题出在lodash find helper函数

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 });

React Router Lodash辅助函数

1 个答案: