React Typescript：当我尝试使用 withRouter 将历史参数从组件发送到操作时出现问题

Question

我使用 ReactJS + Typescript

在 Login.tsx 组件中，当用户按下登录按钮时，我想用 react 路由器 dom 中的 history 参数调用一个动作（我使用 redux-thunk）。

当我使用 withRouter 函数导出 Login.tsx 组件以访问历史记录时，我收到以下警告： 'ComponentClass 类型的参数，任何> & WithRouterStatics > '不可分配给类型的参数' ComponentType

在我调用操作“loginUser”的那一行，我得到了错误：“预期有 1 个参数，但得到了 2 个。”

我不知道如何以正确的方式使用 withRouter 发送历史参数，如果有人对此有解决方案，我会很高兴，谢谢你，对不起我的英语不好。

这是 Login.tsx 组件的代码：

import React, { useState } from 'react'
import { connect } from "react-redux";
import { withRouter, RouteComponentProps } from "react-router-dom";
import { loginUser } from "../../actions/user";
import { AppState } from "../../reducers/rootReducer";
import styles from "./Login.module.css";

export interface FormLoginInput {
  email: string;
  password: string;
}

type IProps =  RouteComponentProps & {
  loading: boolean;
  loginUser: (formLoginInput: FormLoginInput) => React.ReactNode;
  message: string | null | undefined;
  errors: [] | null | undefined;
  error: boolean;
}

const Login: React.FC<IProps> = ({ loading, message, errors, error, loginUser, history }): JSX.Element => {
  const [formInput, setFormInput] = useState<FormLoginInput>({
    email: "",
    password: ""
  });

  const { email, password } = formInput;

  const handleSubmitLogin = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(formInput);
    console.log(history);
    loginUser(formInput, history);
  }

  return (
    <form className={styles.form} onSubmit={handleSubmitLogin}>
      <h1 className={styles.formTitle}>login</h1>
      <p className={styles.formDesc}>Login Here For Using Our Features</p>
      <div className={styles.formInput}>
        <input 
          type="text" 
          placeholder="Enter Email..."
          name="email"
          value={email}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFormInput({ ...formInput, [e.target.name]: e.target.value })}
        />
      </div>
      <div className={styles.formInput}>
        <input 
          type="password" 
          placeholder="Enter Password..."
          name="password"
          value={password}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFormInput({ ...formInput, [e.target.name]: e.target.value })}  
        />
      </div>
      <input className={styles.formBtn} type="submit" value="Login" />
    </form>
  );
};

const mapStateToProps = (state: AppState) => ({
  message: state.user.message,
  errors: state.user.errors,
  error: state.user.error,
  loading: state.user.loading
});

export default connect(mapStateToProps, { loginUser })(withRouter(Login));

以及我想使用历史参数调用的导入操作“loginUser”：

export const loginUser = (formLoginInput: FormLoginInput, history: any) => async (dispatch: Dispatch<IAction>): Promise<any> => {
  const { email, password } = formLoginInput;
  const body: string = JSON.stringify({ email, password });

  try {
    const response: AxiosResponse<any> = await axios.post("http://localhost:5000/auth/login", body, config);
    response.data.message = "Login with success!";

    dispatch({
      type: LOGIN_USER,
      data: response.data
    });
    history.push("/user/dashboard");
  } catch(error) {
    dispatch({
      type: LOGIN_ERROR, 
      data: error.response.data
    });
    console.error(error.message);
  }
} 

Answer 1

你应该使用compose

import { compose } from 'redux';



export default compose(
    withRouter,
    connect(mapStateToProps, { loginUser } )(Login)
);