Question

我在定义应该传递给属性的内容时遇到问题，这基本上是向我的api发送请求以获取数据的函数。当我想在Header组件中呈现Layout时，会抛出错误requestAvailableContexts is missing in type {}

是否有可能使requestAvailableContexts属性表示函数可选？

我可以使用此<Header requestAvailableContexts={null} />绕过错误将属性设置为null，但我认为这不是一个好方法

这是我的布局组件

export class Layout extends React.Component<{}, {}> {
public render() {
    return <div className="app_layout">
        // here it throws me an error that requestAvailableContexts property is missing
        <Header /> 
        //I can bypass that by setting property to null
        //<Header requestAvailableContexts={null} /> 
        <div className="app_menu col-sm-4 col-md-4 col-lg-2 no-side-padding">
            <NavMenu />
        </div>
        <div className='col-lg-10'>
            {this.props.children}
        </div>
    </div>;
}}

包含下拉组件的标头组件，我需要从我的api加载一些数据，并通过redux connect（）连接到商店

type ProcessListProps =
    HeaderState.IImporterSelectorContextState
    & typeof HeaderState.actionCreators;

class Header extends React.PureComponent<ProcessListProps, {}> {
    constructor(props) {
        super(props);
    }

    componentWillMount(): void {
        this.props.requestAvailableContexts(this.props.dataQuery);
    }

    render() {
        return (
            <header>
                <div className="app_header">
                    <div className="containerLogo">
                        <Logo />
                    </div>      
                    <nav className="">                      
                        <DropDownList
                            data={this.props.data}
                            textField={'code'}
                            value={'id'}
                            className="dd-header" />
                        <Notification />
                        <Logout />
                        <Fullscreen />
                    </nav>
                </div>
            </header>
        );
    }
}

export default connect(
    (state: ApplicationState) => state.headerContextSelector,
    HeaderState.actionCreators
)(Header) as typeof Header;

这是我为Header组件

定义reducer和action creators的组件

const GET_AVAILABLE_CONTEXTS = "GET_AVAILABLE_CONTEXTS";
const GET_AVAILABLE_CONTEXTS_SUCCESS = "GET_AVAILABLE_CONTEXTS_SUCCESS";

export interface IImporterSelectorContextState {
    dataQuery?: ServiceApi.IDataQuery;
    data?: any[];
}

//request to api for all available contexts to user
interface AllAvailableContexts {
    type: typeof GET_AVAILABLE_CONTEXTS;
    data: { query: any }
}

export const getAvailableContexts = (dataQuery: ServiceApi.IDataQuery): AllAvailableContexts => ({
    type: GET_AVAILABLE_CONTEXTS,
    data: { query: dataQuery }
});

//successfull respond from api to get all available contexts
interface GetAllImporterContextDataSuccess {
    type: typeof GET_AVAILABLE_CONTEXTS_SUCCESS;
    data: any;
}

export const getAllImporterContextDataSuccess = (data: any): GetAllImporterContextDataSuccess => ({
    type: GET_AVAILABLE_CONTEXTS_SUCCESS,
    data: data
});

type KnownAction = 
    AllAvailableContexts |
    GetAllImporterContextDataSuccess | 
    GetAllImporterContextDataFailure

export const actionCreators = {
    requestAvailableContexts: (dataQuery: ServiceApi.IDataQuery): AppThunkAction<KnownAction> => (dispatch, getState) => {
        client.apiImporterDataPost(ServiceApi.DataQuery.fromJS(dataQuery))
            .then(result => dispatch(getAllImporterContextDataSuccess(result.data)))

        dispatch(getAvailableContexts(dataQuery));
    }
}

const unloadedState: IImporterSelectorContextState = {
    dataQuery: {
        collectionName: "",
        filter: {},
        sort: {},
        projection: {},
        take: 200,
        skip: 0,
        includeTotalCount: false,
        context: null,
        dialect: 0,
        parameters: null,
    },
    data: []
};

export const reducer: Reducer<IImporterSelectorContextState> = (state: IImporterSelectorContextState,
    incomingAction: Action) => {

    const action = incomingAction as KnownAction;
    switch (action.type) {
        case GET_AVAILABLE_CONTEXTS:
            return {
                ...state
            }
        case GET_AVAILABLE_CONTEXTS_SUCCESS:
            return {
                ...state,
                data: action.data
            }
        default:
            const exhaustiveCheck: never = action;
    }
    return state || unloadedState;
}

Answer 1

您正在使用流程类型

SELECT
    F.name AS FolderName
,   F.description AS FolderDescription
,   PR.name AS ProjectName
,   P.description AS ProjectDescription
,   PR.project_format_version
,   PR.deployed_by_name
,   PR.last_deployed_time
,   PR.created_time
,   PR.validation_status
,   PR.last_validation_time
,   P.name AS PackageName
,   P.description AS PackageDescription
,   P.version_major
,   P.version_minor
,   P.version_build
,   P.version_comments
FROM
    catalog.projects AS PR
    INNER JOIN
        catalog.folders AS F
        ON F.folder_id = PR.folder_id
    INNER JOIN
        catalog.packages AS P
        ON P.project_id = PR.project_id;

解决方案是在调用该函数之前检查Header组件

type ProcessListProps =
    HeaderState.IImporterSelectorContextState
    & typeof HeaderState.actionCreators 
    & typeof (string) => void;

类型{}中缺少React - property

1 个答案: