属性'then'在类型'ThunkAction <Promise <any>,RootState,undefined,any>'上不存在。 TS2339

时间:2020-03-26 15:45:49

标签: reactjs redux react-redux redux-thunk react-typescript

我刚刚将react-redux从4.0.0升级到4.0.5,并且我的代码在编译过程中失败了。我收到错误

类型“ ThunkAction,RootState,未定义,任何>”上的属性“ then”不存在。 TS2339

import { ThunkAction, ThunkDispatch as Dispatch } from "redux-thunk";

import { RootState } from "../store/reducer";
import { RootAction } from "../store/actions";

export type ThunkResult<R> = ThunkAction<R, RootState, undefined, RootAction>;

export type ThunkDispatch = Dispatch<RootState, undefined, RootAction>;

// Copied from https://github.com/reduxjs/redux-thunk/blob/0e60b6264fb402afb328157c4337f5cc87a07b53/index.d.ts#L63-L67
export type ThunkActionDispatch<
  TActionCreator extends (...args: any[]) => ThunkAction<any, any, any, any>
> = (
  ...args: Parameters<TActionCreator>
) => ReturnType<ReturnType<TActionCreator>>;

组件:

import * as React from "react";
import { connect } from "react-redux";
import { withRouter, RouteComponentProps } from "react-router-dom";

import {
  Dialog,
  FormGroup,
  InputGroup,
  Button,
  Classes,
} from "@blueprintjs/core";

import { createClient } from "../../store/modules/client";
import { ThunkDispatch } from "../../types/redux";

interface IProps extends RouteComponentProps<any> {
  dispatch: ThunkDispatch;
  isOpen: boolean;
  onClose: () => void;
}

interface IState {
  name: string;
  isLoading: boolean;
  error: string;
}

class CreateClientModal extends React.Component<IProps, IState> {
  public state: IState = {
    name: "",
    isLoading: false,
    error: "",
  };

  public render() {
    return (
      <Dialog
        isOpen={this.props.isOpen}
        onClose={this.props.onClose}
        title="Add New Client"
      >
        <div className={Classes.DIALOG_BODY}>
          <FormGroup
            helperText={this.state.error}
            intent={this.state.error ? "danger" : "none"}
            label="New Client"
            labelFor="client-name-input"
            labelInfo="(required)"
          >
            <InputGroup
              id="client-name-input"
              placeholder="Client Name"
              required={true}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                this.setState({ name: e.target.value })
              }
            />
          </FormGroup>
        </div>
        <div className={Classes.DIALOG_FOOTER}>
          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
            <Button
              onClick={this.handleOnClose}
              disabled={this.state.isLoading}
            >
              Cancel
            </Button>
            <Button
              intent="primary"
              onClick={this.handleSubmit}
              loading={this.state.isLoading}
            >
              Create Client
            </Button>
          </div>
        </div>
      </Dialog>
    );
  }

  private handleOnClose = () => {
    this.setState({ error: "" });
    this.props.onClose();
  };

  private handleSubmit = async () => {
    this.setState({ isLoading: true });

    this.props
      .dispatch(createClient(this.state.name))
      .then(client => {
        this.props.history.push(`/clients/${client.payload.id}`);
      })
      .catch(error => {
        this.setState({
          isLoading: false,
          error: "Error creating client. Please try again.",
        });
        // tslint:disable-next-line:no-console
        console.error(error);
      });
  };
}

export default withRouter(connect()(CreateClientModal));

我在this.props.dispatch(createClient(this.state.name))。then()处收到错误。请提出解决方案的建议。谢谢。

0 个答案:

没有答案
相关问题