Question

我必须通过调用工作ID来获取位置信息。我为此创建了动作和减速器。在将动作调用到组件中时，出现此错误。请帮助我，我是新来的。

action.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
            }

ConfiguredLocation.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（）出现问题。你能给我一些解决这个问题的建议吗？

Answer 1

您如何传递jobId？您必须像这样定义路由：那么您可以从this.props.match.params.jobId

访问它

Answer 2

确保在<ConfiguredLocation>内呈现<Route>，或使用withRouter() 更多信息： https://reacttraining.com/react-router/core/api/match和 https://reacttraining.com/react-router/core/api/withRouter

Answer 3

您可以尝试这种方法：

如果尚未安装ConfiguredLocation.jsx，请通过withRouter安装react-router-dom
在ConfiguredLocation中导入withRouter(ConfiguredLocation)并像这样ConfiguredLocation.jsx包裹import React from 'react'; import ReactDOM from 'react-dom'; import { connect } from 'react-redux'; // add the import bellow import { withRouter } from 'react-router-dom'; 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); export default connect(mapStateToProps,mapDispatchToProps)(withRouter(ConfiguredLocation));

fun updateFilterInfo(showing: Int, total: Int) { binding?.tvFilterLvl1?.let { text = "$showing / $total" } }应该看起来像这样：

{{1}}

通过ID检索数据时，无法读取未定义的属性“ params”

3 个答案: