我正在使用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
不是函数!
有人知道我在这里想念什么吗?
答案 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)
好吧,我发现了问题,这是我的错误,我在compose
和withFormikHoc
之前的withStateHoc
中添加了withIsEligibleStateHoc
,这就是错误的原因。带来他们之后,第一个问题解决了。