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)
     }
   }
})

当我在 VCode 中将鼠标悬停在 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)
  }
}

这样，您只需从 props 中提取所需的值，而不会得到一个充满您并不真正需要的属性的对象。

编辑

如果你愿意，你可以选择不解构任何东西，你的结局可能会像这样：

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

我刚刚发现您根本没有使用 setSubmitting。如果你愿意，你可以删除它。

Answer 2

嗯，我发现问题是我的错误，在我的 compose 我在 withStateHoc & withIsEligibleStateHoc 之前添加了 withFormikHoc 这就是错误。把他们带来后第一个问题就解决了。

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

React Recompose : Method created in WithStateProps is not accessible

javascript

typescript

reactjs

recompose