Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
lyz810 opened this issue May 18, 2021 · 0 comments
Open

Comments

@lyz810
Copy link

lyz810 commented May 18, 2021

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;

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant