React Context Provider没有将状态传递给孩子答案

【问题标题】：React Context Provider not passing down state into childrenReact Context Provider没有将状态传递给孩子
【发布时间】：2022-11-09 00:26:58
【问题描述】：

我正在编写一个提供程序，它将包裹其他提供程序以向应用程序提供状态，但是在实现提供程序时出现错误，说孩子缺少提供程序传递的状态。

这是我的提供者：

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)

我已经尝试研究如何将属性传递给孩子，但没有成功。

关于我缺少什么的任何提示？

【问题讨论】：

标签： reactjs typescript react-context

【解决方案1】：

这可能是打字稿错误，因为您没有在 ReferralProviderProps 接口中指定“children”属性。

你可以尝试这样的事情：

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

【讨论】：

谢谢，大卫。我尝试将孩子添加到界面并传递它并不能解决问题。我仍然收到我之前报告的相同错误。当我将子项添加到界面时，我需要将子项添加到提供程序中的 value 道具。