[英]Dynamic routing is not working while adding a new post
在向我的博客添加帖子并为该帖子执行动态路由以显示详细信息时,我无法做到这一点。 动态路由仅适用于我之前保存在 state 上的数据。 不适用于新添加的数据。 this.props 仅显示我保存在 state 中的数据。 给我一些建议。 在添加显示加载的新车辆动态路线时。 它没有从 state 获取新数据。
应用程序.js:
import React, { Component } from 'react'
import './App.css';
import Addview from './components/Addview'
import {BrowserRouter,Route, Switch} from 'react-router-dom'
import Add from './components/Add'
import Vechile from './components/Vechile';
import View from './components/View'
class App extends Component {
render() {
return (
<BrowserRouter>
<div className='App container'>
<h2 className='text-primary text-decoration-underline'>Vehicle Information</h2>
{/* <Addview /> */}
<Route exact Path='/' component ={Addview} />
<Switch>
<Route path = '/add' component={Add} />
<Route path = '/view' component={View} />
<Route path = '/:id' component ={Vechile} />
</Switch>
</div>
</BrowserRouter>
)
}
}
export default App
rootReducer.js:
const initState={
vechileInfo:[
{id:'1' , model_name:'AUDI' , vehchile_type: 'SUV', mileage:"5km/lt", top_speed:'250km/hr', cost:'30lakh', sales_units: 4},
{id:'2' , model_name:'BMW' , vehchile_type: 'Hatchback', mileage:"7km/lt",top_speed:'320km/hr', cost:'40lakh', sales_units: 2},
{id:'3' , model_name:'Mercidez' , vehchile_type: 'SUV', mileage:"6km/lt", top_speed:'220km/hr', cost:'25lakh', sales_units: 6}
]
}
const rootReducer = (state = initState,action) =>{
console.log(action)
switch(action.type){
case "DELETE_VECHILE":
let newVechileInfo= state.vechileInfo.filter(vechile=>{
return action.id!==vechile.id
})
return{
...state,
vechileInfo : newVechileInfo
}
case "ADD_VECHILE":
action.vechile.id=Math.random();
let vechileInfoAdd=[...state.vechileInfo,action.vechile]
console.log(action,vechileInfoAdd)
return{
...state,
vechileInfo: vechileInfoAdd
}
case "SORT_SALES":
let sortvechileInfo = action.vechile.sort((a,b)=>{
// console.log(action)
return (a.sales_units - b.sales_units)
})
return{
...state,
vechileInfo : sortvechileInfo
}
}
return state
}
export default rootReducer
添加视图.js:
import React from 'react'
import {Link,NavLink} from 'react-router-dom'
const Addview = () => {
return (
<div className='my-5'>
<button type="button" class="btn btn-warning btn-lg"><Link to="/" className="text-decoration-none text-dark fw-bold">Go to Home</Link></button>
<button type="button" class="btn btn-success btn-lg"><Link to="/add" className="text-decoration-none text-dark fw-bold">Add a vechile</Link></button>
<button type="button" class="btn btn-danger btn-lg"><Link to="/view" className="text-decoration-none text-dark fw-bold">View Vechiles</Link> </button>
</div>
)
}
export default Addview
视图.js:
import React, { Component } from 'react'
import { connect } from "react-redux"
import {Link} from 'react-router-dom'
class View extends Component {
handleClick=(id)=>{
this.props.deleteVechile(id)
// console.log(id)
}
handleClickSort=()=>{
this.props.sortSales(this.props.vechileInfo)
}
render() {
// console.log(this.props)
const { vechileInfo } = this.props;
const vechileList = vechileInfo.length ? (
vechileInfo.map(vechile => {
return(
<tbody key={vechile.id}>
<tr>
<td><Link to ={'/' + vechile.id} className='text-decoration-none'>{vechile.model_name}</Link> </td>
<td>{vechile.vehchile_type}</td>
<td>{vechile.mileage}</td>
<td>{vechile.top_speed}</td>
<td>{vechile.cost}</td>
<td>{vechile.sales_units}</td>
<td onClick={()=>{this.handleClick(vechile.id)}} ><a className='text-danger' href='#'>X</a></td>
</tr>
</tbody>
)
})
) : (
<div className="text-dark">No vechile to display. Please add a vechile</div>
)
return (
<div className='container'>
<table className="table table-dark table-hover ">
<thead>
<tr>
<th scope="col">Model Name</th>
<th scope="col">Vechile Type</th>
<th scope="col">Top Speed</th>
<th scope="col">Mileage</th>
<th scope="col">Cost</th>
<th onClick={this.handleClickSort} scope="col">Sales Units</th>
<th scope="col"></th>
</tr>
</thead>
{vechileList}
</table>
</div>
)
}
}
const mapStateToProps = (state,ownProps) => {
console.log(ownProps)
return {
vechileInfo: state.vechileInfo
}
}
const mapDispatchToProps = (dispatch) =>{
return{
deleteVechile: (id) =>{ dispatch({type: 'DELETE_VECHILE', id:id})},
sortSales: (vechile) =>{dispatch({type:'SORT_SALES', vechile})}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(View)
添加.js:
import React, { Component } from 'react'
import { connect } from "react-redux"
class Add extends Component {
state={
model_name:'',
vehchile_type:'',
mileage:'',
top_speed:'',
cost:'',
sales_units:''
}
handleChange=(e)=>{
this.setState({
[e.target.id]: e.target.value
})
}
handleSubmit=(e)=>{
e.preventDefault();
// console.log(this.state)
this.props.addVechile(this.state)
this.props.history.push('/View')
}
render() {
return (
<div>
<form className="row g-3" onSubmit={this.handleSubmit}>
<div className="col-md-6">
<label for="model_name" className="form-label">Model Name</label>
<input type="text" className="form-control" id="model_name" required onChange={this.handleChange}/>
</div>
<div className="col-md-6">
<label for="vehchile_type" className="form-label">Vechile Type</label>
<input type="text" className="form-control" id="vehchile_type" required onChange={this.handleChange}/>
</div>
<div className="col-md-6">
<label for="mileage" className="form-label">Mileage</label>
<input type="text" className="form-control" id="mileage" required onChange={this.handleChange}/>
</div>
<div className="col-md-6">
<label for="top_speed" className="form-label">Top Speed</label>
<input type="text" className="form-control" id="top_speed" required onChange={this.handleChange}/>
</div>
<div className="col-md-6">
<label for="cost" className="form-label">Cost</label>
<input type="text" className="form-control" id="cost" required onChange={this.handleChange}/>
</div>
<div className="col-md-6">
<label for="sales_units" className="form-label">Sales unit in FY20-21</label>
<input type="text" className="form-control" id="sales_units" required onChange={this.handleChange}/>
</div>
<button type="submit" className="btn btn-info col-md-4 offset-md-4 justify-content-center">Login</button>
</form>
</div>
)
}
}
const mapDispatchToProps = (dispatch) =>{
return{
addVechile: (vechile) =>{ dispatch({type: 'ADD_VECHILE', vechile})}
}
}
export default connect(null,mapDispatchToProps)(Add)
Vechile.js:
import React, { Component } from 'react'
import {connect} from 'react-redux'
class Vechile extends Component {
render() {
console.log(this.props.vechile)
const vechile =this.props.vechile ? (
<div>
<h4>Model Name: {this.props.vechile.model_name}</h4>
<h4>Vechile Type: {this.props.vechile.vehchile_type}</h4>
<h4>Mileage: {this.props.vechile.mileage}</h4>
<h4>Top Speed: {this.props.vechile.top_speed}</h4>
<h4>Cost: {this.props.vechile.cost}</h4>
<h4>Sales in unit for FY20-21: {this.props.vechile.sales_units}</h4>
</div>
):(
<div>Loading Data....</div>
)
return (
<div>
<span>{vechile}</span>
</div>
)
}
}
const mapStateToProps=(state,ownProps)=>{
console.log(state,ownProps)
let id= ownProps.match.params.id;
console.log(id)
return{
vechile: state.vechileInfo.find(vechile=>{
return vechile.id===id
})
}
}
export default connect(mapStateToProps)(Vechile)
添加新车辆时,您导航到"/View"
,而不是包含车辆 ID 的路径,例如"/1234"
。 我怀疑这里发生的是您的路由器只有一个"/view"
路径,而不是"/View"
,因此在交换机匹配并呈现您的动态"/:id"
并且为id
分配值"View"
,它可能与任何已保存的车辆id
属性都不匹配。
在Vechile
组件中,注入的vechile
只是未定义,因此呈现"Loading Data...."
。
const mapStateToProps=(state,ownProps)=>{
let id= ownProps.match.params.id;
return{
vechile: state.vechileInfo.find(vechile=>{
return vechile.id === id // <-- vechile.id === "View" is false
})
}
}
如果您想导航到车辆详细信息页面,请在Add
组件中修复导航。 您首先需要添加或生成一个id
属性,然后导航到正确的路径。
import React, { Component } from 'react';
import { connect } from "react-redux";
import { v4 as uuidV4 } from 'uuid';
class Add extends Component {
state={
model_name:'',
vehchile_type:'',
mileage:'',
top_speed:'',
cost:'',
sales_units:''
}
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}
handleSubmit=(e)=>{
e.preventDefault();
const newId = uuidV4(); // <-- generate new id
this.props.addVechile({
...this.state,
id: newId, // <-- add id to new vehicle object
});
this.props.history.push(`/${newId}`); // <-- navigate to generic path with id
}
如果您想导航到“/view”路径,那么您仍然需要创建一个具有id
属性的新车辆 object,但只需指向正确的路径。
...
handleSubmit=(e)=>{
e.preventDefault();
const newId = uuidV4();
this.props.addVechile({
...this.state,
id: newId,
});
this.props.history.push(`/view`); // <-- navigate to "/view" instead of "/View"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.