this.props.history.push 在使用 HOC 记录器时不起作用

Question

我写了下面的代码，1.我想使用Connect在本地存储中存储用户名2.我使用HOC 组件进行日志记录（callInfoLogger 和 callErrorLogger） 3.如果我同时使用 connect 和 HOC，那么 this.props.history.push不工作（它不重定向到 MyDashboard 页面）

你能告诉我我需要做什么来修复代码吗？

App.js

import { BrowserRouter as Router, Route, Switch, } from "react-router-dom";
class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/dashboard" component={MyDashboard} />
        </Switch>
      </Router>
    )
  }
}
export default App;

Login.js
import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import { connect } from 'react-redux';
import HighLevelComponent from './HighLevelComponent';
class Login extends Component {

    state = {
        username: '',
        password: '',
        loginsuccess: true
    }

    callOnSubmit = (e) => {
        e.preventDefault();
        this.props.callErrorLogger("Inside call on Submit");

        if (this.state.loginsuccess === true) {
            this.props.callInfoLogger("Calling Info logger ");

            this.props.onLoginSuccess(this.state.username);
            this.props.history.push('/dashboard');
        }
    };

    render() {
        return (
            <body>
                <form className="login-form" onSubmit={this.callOnSubmit}>
                    <input
                        type="text" onChange={e => {
                            this.setState({
                                ...this.state,
                                username: e.target.value
                            })
                        }}
                    />
                    <input type="password"
                        onChange={e => {
                            this.setState({
                                ...this.state,
                                password: e.target.value
                            })
                        }}
                    />
                    <input type="submit" className="btnSbumit" value="LOG IN" />
                </form>
            </body>
        )
    }

}

const mapDispatchToProps = dispatch => {
    return {
        onLoginSuccess: (username) => dispatch({ type: "LOGIN_SUCCESS", username: username })
    }
}


export default withRouter(HighLevelComponent(connect(null, mapDispatchToProps)(Login)));


MyDashboard.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
class MyDashboard extends Component {
    render() {
        return (
            <body>
                <h1>Welcome to React.. {this.props.username}</h1>
            </body>
        )
    }
}

const mapStateToProps = state => {
    return {
        username: state.username
    }
}

export default connect(mapStateToProps, null)(MyDashboard);


HighLevelComponent.js

import React from 'react';

    const HighLevelComponent = (WrapperComponent) => {
        class NewComponent extends React.Component {
            callInfoLogger = (infomsg) => {
                console.info(infomsg);
            }
            callErrorLogger = (errmsg) => {
                console.error(errmsg);
            }
            render() {
                return <WrapperComponent callInfoLogger={this.callInfoLogger} callErrorLogger={this.callErrorLogger} />
            }
    }
    return NewComponent;
}
export default HighLevelComponent;

Answer 1

在 HOC 名称HighLevelComponent中，将 props 传递给包装器组件，如下所示：

 const HighLevelComponent = (WrapperComponent) => { class NewComponent extends React.Component { callInfoLogger = (infomsg) => { console.info(infomsg); } callErrorLogger = (errmsg) => { console.error(errmsg); } render() { return <WrapperComponent callInfoLogger={this.callInfoLogger} callErrorLogger={this.callErrorLogger} {...props} /> } } return NewComponent; }

请注意包装器组件上的{...props} 。 这样所有的道具都会被进一步传递。

this.props.history.push 在使用 HOC 记录器时不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-26 14:09:43

this.props.history.push 在使用 HOC 记录器时不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-26 14:09:43

解决方案1
0 已采纳 2020-05-26 14:09:43