withRouter 和 connect() 导致应用程序崩溃

Question

我正在尝试使用 withRouter，以便在用户注册后推送到历史记录以重定向用户。在我决定实施 react-redux 等之前，它一直运行良好。我将 connect() HOC 添加到 Login 组件，现在应用程序无法加载，就像我将 withRouter() 放在 Register 组件中一样。我已经试过了

withRouter(connect(...)(MyComponent))

但它不起作用。我不知道该怎么办。

注册.js

import React from "react";
import "./Register.css";
import { withRouter } from 'react-router';
const initialUser = {
  username: "",
  email: "",
  password: "",
  password2: "",
  name: ""
};

class Register extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: initialUser,
      registered: ""
    };
  }

  handleChange = event => {
    this.setState({
      user: {
        ...this.state.user,
        [event.target.name]: event.target.value
      }
    });
  };


  isRegistered = () => {
    const { registered } = this.state;
    if (registered) {
      this.props.context.history.push('/path')
    }
  };

  onRegister = event => {
    event.preventDefault();
    fetch("http://localhost:3000/register", {
      method: "post",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(this.state.user)
    })
      .then(res => res.json())
      .then(data => {
        if (data.isRegistered) {
          this.setState({ registered: true });
          this.isRegistered();
        }
      });
  };

  render() {
    return (
      <div className="login-page">
        <div className="form">
          <form className="login-form" onSubmit={this.onRegister}>
            <input
              type="text"
              placeholder="name"
              name="name"
              value={this.state.user.name}
              onChange={this.handleChange}
            />
            <input
              type="text"
              placeholder="username"
              name="username"
              value={this.state.user.username}
              onChange={this.handleChange}
            />
            <input
              type="text"
              placeholder="email"
              name="email"
              value={this.state.user.email}
              onChange={this.handleChange}
            />
            <input
              type="password"
              placeholder="password"
              name="password"
              value={this.state.user.password}
              onChange={this.handleChange}
            />
            <input
              type="password"
              placeholder="confirm password"
              name="password2"
              value={this.state.user.password2}
              onChange={this.handleChange}
            />
            <button className="bluecolor" type="submit">
              Register
            </button>
            <p className="message">
              Have an account? <a href="/login">Login</a>
            </p>
          </form>
        </div>
      </div>
    );
  }
}

export default withRouter(Register);

登录.js

import React from "react";
import { connect } from 'react-redux';
import { setUserStatus } from '../../../actions'

const mapStateToProps = state => {
  console.log('mapstate', state.isLoggedIn)
  return {
    isLoggedIn: state.isLoggedIn
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    onLoggedInSuccess: () => dispatch(setUserStatus(true))
  }
} 

const initialUser = {
  username: "",
  password: "",
};

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: initialUser,
      loggedIn: false
    };
  }

  handleChange = event => {
    this.setState({
      user: {
        ...this.state.user,
        [event.target.name]: event.target.value
      }
    });
  };
  onLoginClick = () => {
    const { loggedIn } = this.state;
    console.log(loggedIn, 'this.state')
    if (loggedIn) {
      this.props.onLoggedInSuccess(true);
    }
  };
  onLogin = event => {
    event.preventDefault();
    fetch("http://localhost:3000/login", {
      method: "post",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(this.state.user)
    })
      .then(res => res.json())
      .then(data => {
        if (data.loggedIn) {
          this.setState({ loggedIn: true });
          this.onLoginClick();
        }
      });
  };

  render() {
    return (
      <div className="login-page">
        <div className="form">
          <form className="login-form" onSubmit={this.onLogin}>
            <input
              type="text"
              placeholder="username"
              name="username"
              value={this.state.user.username}
              onChange={this.handleChange}
            />
            <input
              type="password"
              placeholder="password"
              name="password"
              value={this.state.user.password}
              onChange={this.handleChange}
            />
            <button className="bluecolor" type="submit">
              Login
            </button>
            <p className="message">
              Have an account? <a href="/login">Login</a>
            </p>
          </form>
        </div>
      </div>
    );
  }
}

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

App.js

import React, { Component } from 'react';
import RegisterFull from "./Components/Register/RegisterFull";
import LoginFull from "./Components/Login/LoginFull";
import HomeFull from "./Components/Home/HomeFull";
import FullContact from "./Components/Contact/FullContact";
import './App.css';
import './Components/flex.css'
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      signedIn: false
    };
  }
  loginUser = () => {
    this.setState({ signedIn: true });
  };

  render() {
    console.log(this)
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={HomeFull} />
          <Route exact path="/contact" component={FullContact} />
          <Route exact path="/login" component={LoginFull} />
          <Route exact path="/register" component={RegisterFull} />
          <Route exact path="/about" component={HomeFull} />
        </Switch>
      </Router>
    );
  }
}

export default App;

Answer 1

您似乎忘记在您的应用程序中使用<Provider> 标签包装您的<Router>。

它应该看起来像：

const App = ({ store }) => (
  <Provider store={store}>
    <Router>
      <Route path="/" component={HomeFull} />
      <...other routes go here...>
    </Router>
  </Provider>
);

Provider 来自 react-redux 包。

更多详情请见here。