首页 > 解决方案 > 通过 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() 有一些问题。你能给我一些建议来解决这个问题吗

标签: javascriptreactjsreact-redux

解决方案


确保<ConfiguredLocation>在内部渲染<Route>,或使用withRouter() 更多信息: https ://reacttraining.com/react-router/core/api/match和 https://reacttraining.com/react-router/core/api/withRouter


推荐阅读