React Recompose:无法访问WithStateProps中创建的方法

时间:2018-11-21 16:54:54

标签: javascript reactjs typescript recompose

我正在使用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)
     }
   }
})

当我在VCode中将鼠标悬停在props.setReady(true)上时,我会看到:(method) WithStateProps.setReady(value: boolean): void

但是我知道props.setReady不是函数!

有人知道我在这里想念什么吗?

2 个答案:

答案 0 :(得分:0)

您没有正确获得道具。您的解构函数是错误的。

这是它的外观:

handleSubmit: async (values, { setSubmitting, ...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。您可以根据需要将其删除。

答案 1 :(得分:0)

好吧,我发现了问题,这是我的错误,我在composewithFormikHoc之前的withStateHoc中添加了withIsEligibleStateHoc,这就是错误的原因。带来他们之后,第一个问题解决了。