import React, {Component} from 'react';
import {Route, Switch} from 'react-router-dom';
import items from './item_db';
import Nav from './components/Nav';
import Footer from './components/Footer';
import Home from './pages/Home';
import About from './pages/About';
import Items from './pages/Items';
import Contact from './pages/Contact';
import More from './pages/More';
import NotFound from './pages/NotFound';
class App extends Component{
constructor(props){
super(props);
this.state ={
activeItemId: null
};
this.selectItem = this.selectItem.bind(this)
}
selectItem(itemId){
console.log("Item ID " + itemId);
this.setState({activeItemId: itemId},()=>{console.log("State: " + this.state.activeItemId)});
}
handleItemIdReceiver(){
this.setState({itemId: []})
}
render(){
const {activeItemId} = this.state;
return (
<main>
<Nav/>
<div className="content">
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About}/>
<Route exact path="/shop" render={()=> <Items items={items} onSelectItemCallback={this.selectItem} />}/>
<Route exact path="/contact" component={Contact} />
<Route exact path="/more/:id" render={()=> <More items={items}/>}/>
<Route exact component={NotFound} />
<Footer/>
</Switch>
</div>
</main>
);
}
}
export default App;import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import '../css/more.css';
export default class More extends Component{
renderItem(item) {
const { id, title, descr, img, price } = item;
return(
<div className="more__info">
<div className="more__info">
<img src={img} alt=""/>
<div className="title">
<h1 className="title__name">{title}</h1>
<p className="descr">
{descr}
</p>
<div className="wrap">
<Link to="/shop" className="back">Назад</Link>
</div>
</div>
</div>
</div>
);
}
renderEmpty(){
return (
<div className="wrap">
<Link to="/shop" className="back">Назад</Link>
</div>
)
}
render(){
const itemId = this.props.match.params;
const item =this.props.items[itemId];
return item ? this.renderItem(item) : this.renderEmpty();
}
}TypeError: Cannot read property 'params' of undefinedimport React, {Component} from 'react';
import {Link} from 'react-router-dom';
import '../css/more.css';
export default class More extends Component{
constructor(props){
super(props);
this.handleDisplayReturn = this.handleDisplayReturn.bind(this);
this.handleErrorReturn = this.handleErrorReturn.bind(this);
}
render(){
const itemId = this.props.match.params;
const item =this.props.items[itemId];
const { id, title, descr, img, price } = item;
return(
<div className="more__info">
<img src={img} alt=""/>
<div className="title">
<h1 className="title__name">{title}</h1>
<p className="descr">
{descr}
</p>
<div className="wrap">
<Link to="/shop" className="back">Назад</Link>
</div>
</div>
</div>
);
}
}
И ещё - у меня есть абсолютно идентичный код, но с другой таблицей, всё идентично, даже методы getVacancyById и getResumeById идентичны. Но вот с таблицей resume всё работает