React Context Provider没有将状态传递给子节点

Question

我正在编写一个提供程序，它将围绕其他提供程序向应用程序提供状态，但在实现提供程序时，我得到一个错误，说子程序缺少由提供程序传递的状态。

这是我的提供商:

export interface ReferralProviderProps {
getReferralData: (options: LegacyReferralSubscribeOptions) => Promise<void>;
referralData: ReferralData;
error: string | null;
loading: boolean;
}
export interface ReferralState {
referralData: ReferralData | null;
loading: boolean;
error: string | null;
}
// Other interfaces are hidden for simplicity
export const ReferralProvider: React.FC<ReferralProviderProps> = ({
children,
}) => {
const initialState: ReferralState = {
error: null,
loading: false,
referralData: null,
};
const [state, dispatch] = useReducer(ReferralReducer, initialState);

const getReferralData = async (options: LegacyReferralSubscribeOptions) => {
try {
dispatch({
type: ReferralActionKind.GET_REFERRAL,
payload: null,
});
const response = await legacyReferralSubscribe(options);
dispatch({
type: ReferralActionKind.GET_REFERRAL_SUCCESS,
payload: response,
});
} catch (error) {
dispatch({
type: ReferralActionKind.GET_REFERRAL_ERROR,
payload: error,
});
}
};
return (
<ReferralContext.Provider
value={{
error: state.error,
loading: state.loading,
referralData: state.referralData,
getReferralData,
}}
>
{children}
</ReferralContext.Provider>
);
};
export const useReferralContext = () => {
return useContext(ReferralContext);
};

实现如下:

export const ApplicationProvider: FC<{ children?: React.ReactNode }> = (
props
) => {
const { children } = props;
return (
<UserProfileProvider>
<ReferralProvider>
<HeadlessProvider>
{children}
</HeadlessProvider>
</ReferralProvider>
</UserProfileProvider>
);
};

错误如下:

Type '{ children: Element; }' is missing the following properties from type 'ReferralProviderProps': getReferralData, referralData, error, loadingts(2739) 

我试着研究如何将属性传递给子元素，但没有成功。

有没有提示我错过了什么?

Answer 1

这可能是打字错误，因为您没有指定"children">

你可以尝试这样做:

export interface ReferralProviderProps {
getReferralData: (options: LegacyReferralSubscribeOptions) => Promise<void>;
referralData: ReferralData;
error: string | null;
loading: boolean;
children: React.ReactNode;
}