Skip to content

rc-form特殊场景下报错Cannot read property 'filter' of undefined #513

@lyz810

Description

@lyz810

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;

重现步骤:
点击按钮,直接报错

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions