form

form copied to clipboard

rc-form版本：2.4.12

部分错误堆栈信息：

Uncaught TypeError: Cannot read property 'filter' of undefined
    at Object.getRules (createBaseForm.js:263)
    at createBaseForm.js:403
    at Array.forEach (<anonymous>)
    at Object.validateFieldsInternal (createBaseForm.js:390)
    at Object.onCollectValidate (createBaseForm.js:143)
    at MyComponent.componentDidMount (demo.jsx:8)

应用场景： 自定义组件MyComponent在ComponentDidMount时会检测一下props的值是否符合规范（百分数需转为小数），并通过onChange抛给form，以便通过validate检测 实际场景中MyComponent实现较复杂，在hidden状态下不希望渲染MyComponent，所以如果隐藏该问题则渲染一个空div不渲染MyComponent，点击按钮后再渲染 此时会报错（该字段设置了校验规则） 目前通过了一些手段绕过了此问题，但对性能有一定影响，希望组件能处理下这种场景下的报错

可重现最简Demo:

// demo.jsx
import React from 'react';
import { createForm } from 'rc-form';

class MyComponent extends React.PureComponent {
    componentDidMount() {
        const { value, onChange } = this.props;
        if (value && value.endsWith('%')) {
            onChange(value.replace('%', '') / 100);
        }
    }

    render() {
        return this.props.value;
    }
}

@createForm()
class Form extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            hidden: true,
        };
    }

    render() {
        const { form } = this.props;
        const { hidden } = this.state;
        return (
            <>
            <button onClick={() => this.setState({
                hidden: false,
            })}>click me</button>
            <div>
                {form.getFieldDecorator('id', {
                    initialValue: '50%',
                    hidden,
                    rules: [{
                        pattern: /^[\d.]+$/,
                        message: 'xx',
                    }],
                })(hidden ? <div hidden /> : <MyComponent />)}
            </div>
            </>
        );
    }
}

export default Form;

重现步骤： 点击按钮，直接报错