React Typescript: проблема, когда я пытаюсь отправить аргумент истории из компонента в действие с помощью withRouter - PullRequest
Новая
       84

React Typescript: проблема, когда я пытаюсь отправить аргумент истории из компонента в действие с помощью withRouter

0 голосов
/ 19 июня 2020

Я использую ReactJS + Typescript

В компоненте Login.tsx, когда пользователь нажимает кнопку входа в систему, я хочу вызвать действие (я использую redux-thunk) с параметром истории из реагировать на маршрутизатор dom.

Когда я экспортирую компонент Login.tsx с помощью функции withRouter для доступа к истории, я получаю следующее предупреждение: «Аргумент типа ComponentClass, any> & WithRouterStatics>» не присваивается параметру типа ComponentType

И в строке, где я вызываю действие «loginUser», я получаю сообщение об ошибке: «Ожидается 1 аргумент, но есть 2».

Я не знаю, как отправьте параметр истории с помощью withRouter надлежащим образом, если у кого-то есть решение для этого, будет грустно, спасибо и извините за мой плохой engli sh.

Вот код для компонента 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);
  }
}

1 Ответ

0 голосов
/ 19 июня 2020

вы должны использовать compose 

import { compose } from 'redux';



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