我正在尝试使用fetch编辑数据库中的数据，但它显示无法读取属性＆＃39; params＆＃39;未定义的错误，我提取它将不会使用this.props.match.params.id得到该ID 这是我的行动
const reportsFetched = (reports,r_id) => {
return {
type: 'REPORTS_FETCHED',
reports,
r_id
}
}
export const fetchReportsbyid = (r_id) => {
return dispatch => {
fetch(`http://localhost/aruna/getreportsbyid.php?r_id=${r_id}`).
then(resp => resp.json()).
then(data => dispatch(reportsFetched(data.reports)));
}
}
我的reducer文件
export default (state=reportsDefaultstate, action ) => {
switch (action.type){
case 'ADD_REPORT':
return [
...state,
action.reports
]
case 'REPORTS_FETCHED':
const index = state.findIndex(item => item.r_id === action.reports.r_id);
if(index > -1){
return state.map((item) => {
if(item.r_id === action.reports.r_id) return action.reports
return item
})
}else{
return [...state]
}
case 'SET_REPORTS':
return action.reports
default:
return state
}
}const Reportlistitem = ({r_id, reg_date, reg_no, patient_name, gender, age, mobile_no , email_id , refer_by, test_request , report_status , total_amt, receipt_amt, bal_amt}) => (
<div >
<table>
<tbody key={r_id}>
<tr>
<td>{reg_date}</td>
<td>{reg_no}</td>
<td>{patient_name}</td>
<td>{gender}</td>
<td>{age}</td>
<td>{mobile_no}</td>
<td>{email_id}</td>
<td>{refer_by}</td>
<td>{test_request}</td>
<td>{report_status}</td>
<td>{total_amt}</td>
<td>{receipt_amt}</td>
<td>{bal_amt}</td>
<td><Link to={`/edit/${r_id}`} r_id={r_id} className="btn-floating btn-large blue"><i class="large material-icons">edit</i></Link></td>
<td><button className="btn-floating btn-large red"><i class="large material-icons">delete</i></button></td>
</tr>
</tbody>
</table>
</div>
)
export default connect()(Reportlistitem)
这是发生此错误的表单
import React from 'react'
import {connect} from 'react-redux';
import {fetchReportsbyid} from '../actions/reports'
class ReportForm extends React.Component{
constructor(props){
super(props);
}
state = {
r_id:this.props.report ? this.props.report.r_id :0,
reg_date:this.props.report ? this.props.report.reg_date :'',
reg_no:this.props.report ? this.props.report.reg_no:'',
patient_name:this.props.report ? this.props.report.patient_name:'',
gender:this.props.report ? this.props.report.gender:'',
age:this.props.report ? this.props.report.age:'',
mobile_no:this.props.report ? this.props.report.mobile_no:'',
email_id:this.props.report ? this.props.report.email_id:'',
refer_by:this.props.report ? this.props.report.refer_by:'',
test_request:this.props.report ? this.props.report.test_request:'',
report_status:this.props.report ? this.props.report.report_status:'',
total_amt:this.props.report ? this.props.report.total_amt:'',
receipt_amt:this.props.report ? this.props.report.receipt_amt:'',
bal_amt:this.props.report ? this.props.report.bal_amt:''
}
componentDidMount = () => {
if(this.props.match.params.r_id){
this.props.fetchReportsbyid(this.props.match.params.r_id)
}
}
handleChange = (e) => {
this.setState({[e.target.name]:e.target.value})
console.log(this.state)
}
onSubmit = (e) => {
e.preventDefault();
this.props.onSubmit({
reg_date:this.state.reg_date,
reg_no:this.state.reg_no,
patient_name:this.state.patient_name,
gender:this.state.gender,
age:this.state.age,
mobile_no:this.state.mobile_no,
email_id:this.state.email_id,
refer_by:this.state.refer_by,
test_request:this.state.test_request,
report_status:this.state.report_status,
total_amt:this.state.total_amt,
receipt_amt:this.state.receipt_amt,
bal_amt:this.state.bal_amt,
done:this.state.done
})
}
render(){
return(
<div className="row">
<form onSubmit={this.onSubmit} className="col s12">
<div className="row">
<div className="input-field col s4">
<input id="reg_date" name="reg_date" type="date" className="validate" onChange={this.handleChange} />
</div>
<div className="input-field col s4">
<input id="reg_no" name="reg_no" type="text" className="validate" onChange={this.handleChange}/>
<label for="reg_no">Registration no</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="patient_name" name="patient_name" type="text" className="validate" onChange={this.handleChange} />
<label for="patient_name">Patient Name</label>
</div>
<div className="input-field col s4">
<input id="gender" name="gender" type="text" className="validate" onChange={this.handleChange}/>
<label for="gender">Gender</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="age" name="age" type="text" className="validate" onChange={this.handleChange} />
<label for="age">Age</label>
</div>
<div className="input-field col s4">
<input id="refer_by" name="refer_by" type="text" className="validate" onChange={this.handleChange}/>
<label for="refer_by">Refer by</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="mobile_no" name="mobile_no" type="text" onChange={this.handleChange}/>
<label for="mobile_no">Mobile Number</label>
</div>
<div className="input-field col s4">
<input id="email_id" name="email_id" type="email" onChange={this.handleChange} />
<label for="email_id">Email Id</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<input id="test_rquest" name="test_request" type="text" className="validate" onChange={this.handleChange}/>
<label for="test_rquest">Test Requested</label>
</div>
<div className="input-field col s4">
<input id="report_status" name="report_status" type="text" className="validate" onChange={this.handleChange}/>
<label for="report_status">Report Status</label>
</div>
</div>
<div className="row">
<div className="input-field col s2">
<input id="total_amt" name="total_amt" type="text" className="validate" onChange={this.handleChange}/>
<label for="total_amt">Total Amount</label>
</div>
<div className="input-field col s2">
<input id="receipt_amt" name="receipt_amt" type="text" className="validate" onChange={this.handleChange}/>
<label for="receipt_amt">Receipt Amount</label>
</div>
<div className="input-field col s2">
<input id="bal_amt" type="text" name="bal_amt" className="validate" onChange={this.handleChange}/>
<label for="bal_amt">Balance Amount</label>
</div>
</div>
<div className="input-field col 26">
<input type="submit" className="btn waves-effect waves-light" value="Save Report"/>
</div>
</form>
</div>
)
}
}
export default connect()(ReportForm)
请帮助他弄明白这里的错误
我的路由器文件代码是这个
的问题
import React from 'react'
import {BrowserRouter, Route, Switch, Link,NavLink} from 'react-router-dom'
import Dashboard from '../components/reportdashboard'
import Createreport from '../components/addreport'
import Editreport from '../components/editreport'
import Notfound from '../components/notfound'
import Header from '../components/header'
import Footer from '../components/footer'
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={ Dashboard } exact={true} />
<Route path="/create" component={ Createreport } />
<Route path="/edit/:r_id" component={ Editreport } />
<Route component={ Notfound }/>
</Switch>
<Footer />
</div>
</BrowserRouter>
)
export default AppRouter