Redux Form - 渲染以下自定义组件时出现错误？不知道为啥？

Posted 2023-02-22

【中文标题】Redux Form - 渲染以下自定义组件时出现错误？不知道为啥？

【英文标题】：Redux Form - I get an error when rendering the below custom component? Do not know why?Redux Form - 渲染以下自定义组件时出现错误？不知道为什么？

【发布时间】：2018-08-20 04:43:07

【问题描述】：

我正在尝试使用 redux-form 呈现以下自定义字段组件，我还将自定义道具传递给字段组件，但是它一直给我一个错误，如下所示：

invariant.js:42 未捕获的错误：对象作为 React 子级无效（找到：带有键 renderValidation 的对象）。如果您打算渲染一组子项，请改用数组。 在 InputField 中（由 ConnectedField 创建） 在 ConnectedField 中（由 Connect(ConnectedField) 创建） 在 Connect(ConnectedField) 中（由 Field 创建） 在字段中（由 LoginForm 创建） 在 div 中（由 LoginForm 创建） 在表单中（由 LoginForm 创建） 在 LoginForm 中（由 Form(LoginForm) 创建） 在 Form(LoginForm) 中（由 Connect(Form(LoginForm)) 创建） 在 Connect(Form(LoginForm)) 中（由 ReduxForm 创建） 在 ReduxForm 中（由 Login 创建） 在 div 中（由登录创建） 在 div 中（由登录创建） 在 div 中（由登录创建） 在 div 中（由登录创建） 在 div 中（由登录创建） 在部分（由登录创建） 在登录中（由 Connect(Login) 创建） 在 Connect(Login) 中（由 Route 创建） 在路线 在 div 中 在路由器中（由 ConnectedRouter 创建） 在 ConnectedRouter 在提供者 在不变（invariant.js:42） 在 throwOnInvalidObjectType (react-dom.development.js:6748) 在 reconcileChildFibers (react-dom.development.js:7659) 在 reconcileChildrenAtExpirationTime (react-dom.development.js:7756) 在 reconcileChildren (react-dom.development.js:7747) 在finishClassComponent (react-dom.development.js:7881) 在 updateClassComponent (react-dom.development.js:7850) 在 beginWork (react-dom.development.js:8225) 在 performUnitOfWork (react-dom.development.js:10224) 在 workLoop (react-dom.development.js:10288)

VM250629:20 组件出现上述错误： 在 InputField 中（由 ConnectedField 创建） 在 ConnectedField 中（由 Connect(ConnectedField) 创建） 在 Connect(ConnectedField) 中（由 Field 创建） 在字段中（由 LoginForm 创建） 在 div 中（由 LoginForm 创建） 在表单中（由 LoginForm 创建） 在 LoginForm 中（由 Form(LoginForm) 创建） 在 Form(LoginForm) 中（由 Connect(Form(LoginForm)) 创建） 在 Connect(Form(LoginForm)) 中（由 ReduxForm 创建） 在 ReduxForm 中（由 Login 创建） 在 div 中（由登录创建） 在 div 中（由登录创建） 在 div 中（由登录创建） 在 div 中（由登录创建） 在 div 中（由登录创建） 在部分（由登录创建） 在登录中（由 Connect(Login) 创建） 在 Connect(Login) 中（由 Route 创建） 在路线 在 div 中 在路由器中（由 ConnectedRouter 创建） 在 ConnectedRouter 在提供者中

考虑在树中添加错误边界以自​​定义错误处理行为。

import React,  Component  from 'react';
import PropTypes from 'prop-types';

class InputField extends Component 
    render() 
        const  input, label, id, minlength, maxlength, required, meta:  touched, error   = this.props;

        console.log('InputField - render', input, label, id, minlength, maxlength, required, touched, error);

        let renderValidation = function() 
            if (touched && !error) 
                return <i className="fa fa-check tm-form-valid"></i>;
             else if (touched && error) 
                return <i className="fa fa-exclamation-triangle tm-form-invalid tooltip tooltip-effect tooltip-item"><span className="tooltip-content clearfix"><span className="tooltip-text">error</span></span></i>;
            
        

        return (
            <span className="input input--isao">
                <input ...input
                    className="input__field input__field--isao"
                    spellCheck="false"
                    label=label
                    id=id
                    minLength=minlength
                    maxLength=maxlength
                    required=required />
            </span>,

            <label className="input__label input__label--isao"
                htmlFor=id
                data-content=label>
                <span className="input__label-content input__label-content--isao">
                    label
                </span>
            </label>,

            renderValidation
        );
    


InputField.propTypes = 
    input: PropTypes.object.isRequired,
    label: PropTypes.string.isRequired,
    id: PropTypes.string.isRequired,
    minlength: PropTypes.string.isRequired,
    maxlength: PropTypes.string.isRequired,
    required: PropTypes.bool.isRequired,
    meta: PropTypes.object.isRequired,
    touched: PropTypes.bool,
    error: PropTypes.string
;

export default InputField;

【问题讨论】：

您是否尝试过将渲染的元素包装在单个元素中，例如 <div> <span ...> <label ...> renderValidation </div> ？

谢谢@Dario。这对我有用。我的印象是，只要您用逗号分隔每个元素，它就会呈现。当我将它包装成 瞧，魔术。

【参考方案1】：

render() 方法必须返回一个 HTML 节点。 正如达里奥在他的评论中所说，如果你将它全部包装在 <div> 中，它会起作用。

【讨论】：

感谢@VictorBaron。

【参考方案2】：

import React,  Component  from 'react';
import PropTypes from 'prop-types';

class InputField extends Component 
    render() 
        const  input, label, id, minlength, maxlength, required, meta:  touched, error   = this.props;

        console.log('InputField - render', input, label, id, minlength, maxlength, required, touched, error);

        let renderValidation = function() 
            if (touched && !error) 
                return <i className="fa fa-check tm-form-valid"></i>;
             else if (touched && error) 
                return <i className="fa fa-exclamation-triangle tm-form-invalid tooltip tooltip-effect tooltip-item"><span className="tooltip-content clearfix"><span className="tooltip-text">error</span></span></i>;
            
        

        return (<div className="wrapper">
            <span className="input input--isao">
                <input ...input
                    className="input__field input__field--isao"
                    spellCheck="false"
                    label=label
                    id=id
                    minLength=minlength
                    maxLength=maxlength
                    required=required />
            </span>,

            <label className="input__label input__label--isao"
                htmlFor=id
                data-content=label>
                <span className="input__label-content input__label-content--isao">
                    label
                </span>
            </label>,

            renderValidation
        </div>);
    


InputField.propTypes = 
    input: PropTypes.object.isRequired,
    label: PropTypes.string.isRequired,
    id: PropTypes.string.isRequired,
    minlength: PropTypes.string.isRequired,
    maxlength: PropTypes.string.isRequired,
    required: PropTypes.bool.isRequired,
    meta: PropTypes.object.isRequired,
    touched: PropTypes.bool,
    error: PropTypes.string
;

export default InputField;

如上所述，render() 只能返回一个元素。