Javascript 无法访问HOC'中的道具；s类函数，但能够在渲染中访问它们

我正在努力实现的目标： 我有很多表单，我想在我的HOC中保留表单验证逻辑，这样我就不必重复验证逻辑，因为大多数表单都有相同的字段和一些额外或更少的字段

我如何实施：

学习创建HOC，遵循此示例并尝试创建如下HOC

import React from 'react';
import {
    spaceCheck,
    specialCharacterCheck,
    numberValidator
} from '../../utility/validators';

const fieldHOC = (WrappedComponent) => {
    class HOC extends React.Component {
            state = {
                error: {
                    name_first: {
                        fieldType: 'name_first',
                        errorType: 0
                    },
                    name_last: {
                        fieldType: 'name_last',
                        errorType: 0
                    },
                    email: {
                        fieldType: 'email',
                        errorType: 0
                    }
                }
            };

    getErrorMessage = (fieldType, errorType) => {
        this.setState({
            error: {
                ...this.state.error,
                [fieldType]: {
                    ...this.state.error[fieldType],
                    errorType
                }
            }
        });
    };

    checkFieldsError = (currentFocus, nextFocus) => {
       //Not able to get props passed by below component in class functions
        console.log('MY PROPS', this.props);
        const field = this.props[currentFocus];
        if (field === '' || spaceCheck(field)) {
            this.getErrorMessage(currentFocus, 1);
        } else if (specialCharacterCheck(field)) {
            this.getErrorMessage(currentFocus, 2);
        } else if (numberValidator(field) || numberValidator(field)) {
            this.getErrorMessage(currentFocus, 3);
        } else {
            this.setState({
                error: {
                    ...this.state.error,
                    [currentFocus]: {
                        ...this.state.error[currentFocus],
                        errorType: 0
                    }
                }
            });
        }
        this[nextFocus].focus();
    }
    render() {
        const { children } = this.props;
         // Here able to access props(name_first, name_last and email) passed from below component 
        // console.log('PROPS', this.props);
        return (
            <WrappedComponent
                {...this.props}
                error={this.state.error}
                checkFieldsError={this.checkFieldsError}
            >
                {children}
            </WrappedComponent>
        );
    }
    }
    return HOC;
};

export default fieldHOC;

从“React”导入React；
进口{
太空检查，
特殊字符检查，
数学家
}来自“../../utility/validators”；
常量fieldHOC=（WrappedComponent）=>{
类HOC扩展了React.Component{
状态={
错误：{
请先说出你的名字：{
fieldType:“首先命名”，
错误类型：0
},
姓氏：{
字段类型：“name_last”，
错误类型：0
},
电邮：{
字段类型：“电子邮件”，
错误类型：0
}
}
};
getErrorMessage=（fieldType，errorType）=>{
这是我的国家({
错误：{
…此.state.error，
[字段类型]：{
…this.state.error[fieldType]，
错误类型
}
}
});
};
checkFieldsError=（当前焦点，下一焦点）=>{
//无法在类函数中通过下面的组件获取道具
console.log（'MY PROPS'，this.PROPS）；
const field=this.props[currentFocus]；
如果（字段==''| |空格检查（字段））{
此.getErrorMessage（currentFocus，1）；
}else if（特殊字符检查（字段））{
此.getErrorMessage（currentFocus，2）；
}else if（numberValidator（字段）| | numberValidator（字段））{
此.getErrorMessage（currentFocus，3）；
}否则{
这是我的国家({
错误：{
…此.state.error，
[当前焦点]：{
…此.state.error[currentFocus]，
错误类型：0
}
}
});
}
此[nextFocus].focus（）；
}
render（）{
const{children}=this.props；
//在这里可以访问从下面组件传递的道具（首先是name_，最后是name_和email）
//console.log（'PROPS'，this.PROPS）；
返回(
{儿童}
);
}
}
返回HOC；
};
导出默认的fieldHOC；

我在其中使用这个HOC的组件是

 const FieldValidation = fieldHOC(View);
    class Account extends Component {
        //Some class functions
      render() {
        const { spaceBottom, error } = this.state;
        return (
         <KeyboardAvoidingView
                        style={{ flex: 1 }}
                        keyboardShouldPersistTaps="handled"
                        behavior={Platform.OS === 'ios' ? 'padding' : null}
                    >
                        <KeyboardAwareScrollView
                            keyboardShouldPersistTaps="handled"
                            alwaysBounceVertical={false}
                            contentInset={{ bottom: 0 }}
                        >
                          <FieldValidation
                                name_first={this.state.name_first}
                                name_last={this.state.name_last}
                                email={this.state.email}
                                {...this.props}
                            >
                               <View
                                    style={[
                                        styles.UserContainer,
                                        CommonStyle.shadowStyle
                                    ]}
                                >
                                    <Text style={styles.headingTextStyle}>
                                        Account Details
                                    </Text>
                                    <FormTextInputComponent           
                                         {...testID('first_name')}
                                          errorType={this.props.error.name_first.errorType}
                                          onChangeText={this.handleTextChange('name_first')}
                                          textInputRef={ref => {this.name_first = ref;}}

                                          autoCapitalize="none"
                                          spellCheck={false}
                                          autoCorrect={false}
                                          blurOnSubmit={false}
                                          onSubmitEditing={() => {
                                                    this.props.checkFieldsError('name_first', 'name_last');
                                                }}
                                            />
                                        {this.props.error.name_first.errorType ?
                                                (
                                                    <ErrorMessage textColor="#EA2027" error={error.name_first} />
                                                )
                                                : null}
//Last part 
export default fieldHOC(connect(mapStateToProps)(Account));

const FieldValidation=fieldHOC（视图）；
类帐户扩展组件{
//一些类函数
render（）{
const{spaceBottom，error}=this.state；
返回(
帐户详细信息
{this.name_first=ref；}}
autoCapitalize=“无”
拼写检查={false}
自动更正={false}
blurOnSubmit={false}
onSubmitEditing={（）=>{
this.props.checkFieldsError（'name_first'、'name_last'）；
}}
/>
{this.props.error.name\u first.errorType？
(
)
：null}
//最后部分
导出默认fieldHOC（connect（mapStateToProps）（帐户））；

在上面的组件中，我试图调用用HOC编写的验证函数，它是

checkFieldsError

。

---

我面临的问题是，在这里传递的道具是我用您试图实现的东西创建的，您会注意到，在HOC中，我尝试访问其功能中的道具，也检查控制台以查看控制台日志，请检查代码并遵循相同的示例。您将获得相同的结果。

为什么您正在将

fieldHOC

与View一起使用？@rachidhafour我试图传递名为

Account

的Componet，但我得到错误：元素类型无效，应为字符串或类函数，但未定义。您得到了什么样的错误？现在您正在将HOC两次一次用于没有任何您所需要的支持的组件在HOC和帐户中使用，可能有这些道具。@rachidhafour那么我应该如何使用它呢？