javascript - 通过 id 检索数据时无法读取未定义的属性“参数”
问题描述
我必须通过调用工作 ID 来检索位置信息。我为此创建了动作和减速器。在将操作调用到组件中时,我收到此错误。请帮助我,我是新手。
动作.js
export const retrieveLocations = (jobId) =>(dispatch) => {
return axios.get(urlLoc+'/jobs/'+jobId).then(res => {
dispatch({
type: RETRIEVE_LOCATION,
payload: res.data.job.basicDetails
});
});
};
减速器:
case 'RETRIEVE_LOCATION':
return{
...state,
conLocations:action.payload
}
配置位置.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import store from '../../stores/store';
import {removeLocation,retrieveLocations} from '../../actions/locationActions';
import {removeAllLocation} from '../../actions/locationActions'
let _labels;
class ConfiguredLocation extends React.Component{
constructor(props){
super(props);
this.handleRemove = this.handleRemove.bind(this);
this.clearall = this.clearall.bind(this);
}
componentDidMount() {
let {jobId} = this.props.match.params;
this.props.retrieveLocations(jobId);
}
handleRemove(mruCode){
return this.props.removeLocation(mruCode);
}
clearall (){
return this.props.removeAllLocation()
}
render(){
const _labels = store.getLabels();
const {conLocations} = this.props;
return(
<div className="col-padding">
<div className="pos-div"><h3>Configured Location</h3><button className="allLargeBtn" onClick={()=>{this.clearall()}}>Remove all location</button></div><hr/>
<table className="table">
<tbody>
{conLocations.map((loct,index)=><tr key={index}>
<td><h5>{loct.mruCode} - {_labels[loct.division]} - {loct.country}</h5></td>
<td className="text-right"><button type="button" className ="btn btn-default btn-sm" onClick={()=>{this.props.removeLocation(loct.mruCode)}}>
<span class="glyphicon glyphicon-trash"></span></button></td>
</tr>
)}
</tbody>
</table>
</div>
);
}
}
const mapStateToProps = state =>{
return {
conLocations: state.locationRed.conLocations
};
};
const mapDispatchToProps = (dispatch) =>{
return{
retrieveLocations:(jobId)=>{dispatch(retrieveLocations(jobId))},
removeLocation: (mruCode)=>{dispatch(removeLocation(mruCode))},
removeAllLocation: () =>{dispatch(removeAllLocation())}
};
};
export default connect(mapStateToProps,mapDispatchToProps)(ConfiguredLocation);
我错过了组件中的某些内容。componentDidMount() 有一些问题。你能给我一些建议来解决这个问题吗
解决方案
确保<ConfiguredLocation>
在内部渲染<Route>
,或使用withRouter()
更多信息:
https ://reacttraining.com/react-router/core/api/match和
https://reacttraining.com/react-router/core/api/withRouter
推荐阅读
- sql - 是否可以更改 HIVE 中的分区元数据?
- r - 如何修复 emtrends 错误消息“缺少参数‘选项’,没有默认值”
- javascript - 如何使用 Javascript/JQuery 验证复选框中至少有两个字段被选中?
- php - 从所有 JSON 中获取最多列出的值
- excel - 如果为“真”并跳过空格,则将列复制到另一个单元格
- mysql - 如何在 AWS 上使用 Angular MySQL 部署 Node.JS 应用程序?
- git - 无法确定 Git Push 致命错误的来源
- python - 根据键的值过滤字典列表
- python - Pandas 返回索引名和列名函数
- javascript - 无法从 React 中的待办事项列表中删除项目