Question

我正在尝试在使用匹配时传递多个道具，但似乎每次api调用完成时都会重置状态。我经过的道具是api电话的结果。当我尝试sendbackmeta时，它会进入连续循环。

在课堂外我在App.js

中有这个功能

const AddPropsToRoute = (self, WrappedComponent, passedProps) => {
    return (
        class Route extends Component {
            render() {
                let props = Object.assign({}, this.props, passedProps)
                if (!props.isReady) return null;

                if (self.state.title !== passedProps.meta.title) {
                    self.setState({
                        title: passedProps.meta.title,
                        description: passedProps.meta.description
                    });
                }

                return  <WrappedComponent {...props} />
            }
        }
    )
}

我App.js内的路线

<Route
                            path="/commsmatrix/approve/:id"
                            component={AddPropsToRoute(this, Approve, {
                            meta: {
                                title: 'SOX Approve',
                                description: ''
                            }
                        })}
                        />

我的组件Approve

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { approveCommsmatrixSox } from '../../actions/commsmatrices';
import { bindActionCreators } from 'redux';
import FontAwesome from 'react-fontawesome';
import {updateTitle} from 'redux-title';

class Approve extends Component {
    constructor(props) {
        super(props);
        this.meta = { title: 'Approval', description: 'Sox approval' };
        this.runOnce = false;
        this.passMetaBack = this.passMetaBack.bind(this);
        this.initConfirm = this.initConfirm.bind(this);
        this.state = {
                message : <div>Confirming...<i className="fa fa-spinner fa-spin"></i></div>
        }
    }

    componentDidMount() {
        this.props.updateTitle('a title | ' + this.meta.title);
        const id = this.props.match.params.id;
        this.props.approveCommsmatrixSox(id);
    }

    passMetaBack = () => {
        this.props.passMetaBack(this.meta);
    };

    initConfirm(){
        this.runOnce = true;
        this.props.updateTitle('a title | ' + this.meta.title);
        if(this.props.approvecommsmatrix.error){
            this.setState({ message: this.props.approvecommsmatrix.error.message}); 
        }else{
            this.setState({ message: <div>Confirmed...<i className="fa fa-check"></i></div>});
        }
    }

    render() {

        const { title, updateTitle, approvecommsmatrix } =  this.props ;

        if(!this.runOnce && approvecommsmatrix !== undefined && Object.keys(approvecommsmatrix).length > 0 ){
            this.initConfirm();
        }

        return (
            <div className="container-fluid">
                <div className="row-fluid top-buffer">{this.state.message}</div>
            </div>
        );
    }
}

function mapStateToProps(state, ownProps) {
    if(state.commsmatrices.error){
        return { approvecommsmatrix : state.commsmatrices, title: state.title };
    }
    return { approvecommsmatrix : state.commsmatrices[ownProps.match.params.id] , title: state.title};
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(
        { approveCommsmatrixSox, updateTitle },
        dispatch
    );
}

export default connect(mapStateToProps, mapDispatchToProps)(Approve);

我需要发回标题和说明，以便我可以更新页面上显示的标题组件。

更新

我尝试过关注solution，但match.params为空。

<Route path='/commsmatrix/aggr/:id' component={props => <CommsMatrixAggregateView isReady={this.state.isReady} passMetaBack={this.passMetaBack} {...this.props} />} />

在我的组件匹配和位置是：

{"path":"/","url":"/","params":{},"isExact":false}
{"pathname":"/commsmatrix/aggr/10","search":"","hash":""}

即使查看提及如何使用路线渲染的docs匹配与上述相同但不起作用。

如何在react-router-v4中使用match时传递多个props

0 个答案: