Question

我不断收到此错误：

BankLayoutHeader.tsx：73未捕获的TypeError：无法读取属性未定义的“注销” 在BankLayoutHeader._this.handleLogout处（BankLayoutHeader.tsx：73）在HTMLUnknownElement.callCallback（react-dom.development.js：100）在Object.invokeGuardedCallbackDev（react-dom.development.js：138）在Object.invokeGuardedCallback（react-dom.development.js：187）在Object.invokeGuardedCallbackAndCatchFirstError（react-dom.development.js：201）在executeDispatch（react-dom.development.js：466）在executeDispatchesInOrder（react-dom.development.js：488）在executeDispatchesAndRelease（react-dom.development.js：586）在executeDispatchesAndReleaseTopLevel（react-dom.development.js：597）在forEachAccumulated（react-dom.development.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>
    );
  }
}

Actions-> consts.ts

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

Actions-> 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);
  });
};

接下来，我假设您正在使用Redux，

因此，根据需要，使用connect函数来mapStateToProps和mapDispatchToProps。

未捕获的TypeError：无法读取未定义的属性“注销”

1 个答案: