React Recompose：無法訪問WithStateProps中創建的方法

Question

我正在使用Recompose定義如下的一些方法：

export interface WithStateProps {
  isDisabled: boolean;
  isReady: boolean;
  setDisabled(value: boolean): void;
  setReady(value: boolean): void;
}


export const withStateHoc = withState('isDisabled', 'setDisabled', false);
export const withIsEligibleStateHoc = withState(
  'isReady',
  'setReady',
  true
);

export const isReady = (value : string) => {
  return value ? true : false
};

export type WrappedProps = StepContentProps &
  FormikProps<MyAddress> &
  InjectedIntlProps & 
  AddressFormHandlers & WithStateProps;

當我想使用setReady方法時，收到以下消息： props.setReady is not a function這是我的代碼：

export const withFormikHoc = withFormik<
  WrappedProps & RouteComponentProps<{}> & InjectedIntlProps & WithStateProps,
  MyAddress
>({
 handleSubmit: async (values, { props, setSubmitting }) => {
     const addressAlreadyVerified = isReady(values.country);
     if(addressAlreadyVerified) {
        props.setReady(true)
     }
   }
})

當我將鼠標懸停在props.setReady(true)上時，我可以看到：（ (method) WithStateProps.setReady(value: boolean): void

但是我知道props.setReady不是一個函數！

有人知道我在這里缺少什么嗎？

Answer 1

您沒有正確獲得道具。 您的解構函數是錯誤的。

這是它的外觀：

handleSubmit: async (values, { setSubmitting, ...props }) => {

含義：從組件props中，將setSubmitting提取到其自己的變量中，然后將其他所有內容放入props對象中。

您實際應該做什么：

handleSubmit: async (values, { setReady, setSubmitting }) => {
  const addressAlreadyVerified = isReady(values.country);
  if (addressAlreadyVerified) {
    setReady(true)
  }
}

這樣，您只能從道具中提取所需的值，而不會得到一個對象，該對象具有您實際上不需要的屬性。

編輯

如果願意，可以選擇不解構任何內容，最終可能會像這樣：

handleSubmit: async (values, props) => {
  const addressAlreadyVerified = isReady(values.country);
  if (addressAlreadyVerified) {
    props.setReady(true)
  }
}

我只是意識到您根本沒有使用setSubmitting 。 您可以根據需要將其刪除。

Answer 2

好吧，我發現問題是我的錯誤，在我的compose我在withStateHoc和withIsEligibleStateHoc之前添加了withFormikHoc ，這就是錯誤的原因。 帶來他們后，第一個問題解決了。