遗漏的类型错误：无法读取的未定义的属性“注销”

Question

我不断收到此错误：

BankLayoutHeader.tsx：73未捕获的类型错误：在BankLayoutHeader._this.handleLogout（BankLayoutHeader.tsx：73）无法读取的未定义的属性 '注销' 在HTMLUnknownElement.callCallback（反应-dom.development.js：100）在Object.invokeGuardedCallbackDev（反应-dom.development.js：138）在Object.invokeGuardedCallback（反应-dom.development.js：187）在Object.invokeGuardedCallbackAndCatchFirstError（反应-dom.development.js：201）在executeDispatch（反应-dom.development.js： 466）在executeDispatchesInOrder（反应-dom.development.js：488）在executeDispatchesAndRelease（反应-dom.development.js：在forEachAccumulated（反应-dom.development 597）：586）在executeDispatchesAndReleaseTopLevel（反应-dom.development.js。 JS：567）

我怎么解决这个问题？

export interface IStateProps {
  authListBranch?: IAsyncData<void>;
}

interface IDispatchProps {
  authActions?: typeof AuthActions;
}

class BankLayoutHeader extends React.Component<
  IDispatchProps & IStateProps,
  {}
> {
  private handleLogout = () => {
    const { authActions } = this.props;
    authActions.logout().then((response: any) => {
      console.log(response);
    });
  };

  public render(): JSX.Element {
    return (
      <button
        onClick={this.handleLogout}
        className="admin-layout-header-logout"
      >
        Logout
      </button>
    );
  }
}

动作 - > consts.ts

export const AuthActions = {
    LOGOUT: 'LOGOUT',
};

动作 - > index.ts

export function logout(): any {
  return (dispatch: any) =>
    dispatch({
      payload: AuthService.logout(),
      type: AuthActions.LOGOUT,
    });
}

Reducess-> index.ts

export const initialState: IAuthState = {
  logout: getInitialAsyncData<void>(),
};


export const logout = asyncItemReducerGenerator<void>(
  AuthActions.LOGOUT,
);

export const AuthReducers = combineReducers<IAuthState>({
  logout,
});

服务 - > index.ts

logout(): Promise<any> {
  return postRequest<any, any>(
    `${BASE_URL}/${AUTH_BASE_ENDPOINT}/logout`
  );
},

Answer 1

您BankLayoutHeader组件不接受authActions作为道具。

要做的第一件事是检查是否authActions调用.logout()方法之前存在。

private handleLogout = () => {
  const { authActions } = this.props;
  authActions && authActions.logout().then((response: any) => {
    console.log(response);
  });
};

接下来，我假设你使用的终极版，

因此，使用connect功能mapStateToProps和mapDispatchToProps根据您的需要。