在redux-form中加载指示器

Question

我正在尝试在redux表单中显示加载指示符，我希望加载指示符位于卡片内容（Bulma CSS框架）内。由于render函数中的条件检查逻辑，下面的代码是可行的。当ticket为null时，我会立即返回<div>Loading</div>。但是当我删除那个条件时，它能够显示加载指示符，但是表单不能显示初始值，尽管它包含redux-form道具中的初始值。有没有人有这样的场景以及如何妥善解决这个问题？

＆＃13;

＆＃13;

import React, { Component } from 'react';
    
    import TicketForm from '../TicketForm/TicketForm';
    import CustomerForm from '../CustomerForm/CustomerForm';
    
    class TicketPanel extends Component {
        componentWillMount() {
            this.props.fetchTicket(this.props.ticketId);
        }
    
        render() {
            const {ticket, loading, error} = this.props.activeTicket;
    
            const isComponentLoading = loading || ticket === null;
            const initialValuesForTicket = isComponentLoading ? {} : ticket.original_ticket_payload;
            const initialValuesForCustomer = isComponentLoading ? {} : ticket.contact;
    
            if (error) {
                return <div>Error</div>
            } else if (ticket === null) {
                return <div>Loading</div>
            }
    
            return (
                <div className="ticket-panel">
                    <TicketForm
                        loading={isComponentLoading}
                        initialValues={initialValuesForTicket} />
                </div>
            )
    
        }
    }
    
    export default TicketPanel;

＆＃13;

＆＃13;

＆＃13;

下面是组成代码，其中包含呈现表单的逻辑。它将显示表单组件或加载组件取决于从父级传递的loading props值。

＆＃13;

＆＃13;

import React, { Component } from 'react';
    import CSSModules from 'react-css-modules';
    import {Field, reduxForm} from 'redux-form';
    import {ID_TYPE_COLLECTION} from 'utilities/constant';
    
    import styles from './TicketForm.scss';
    
    class TicketForm extends Component {
        renderIdTypes () {
            return ID_TYPE_COLLECTION.map(idType => {
                return <option key={idType.value} value={idType.value}>{idType.title}</option>;
            });
        }
    
        render() {
            const {handleSubmit, loading} = this.props;
    
            const loadingComponentClass = loading ? "card-content" : "is-hidden";
            const formComponentClass = loading ? "is-hidden" : "card-content";
    
            return (
                <div className="card">
                    <header className="card-header">
                        <p className="card-header-title">
                            Ticket
                        </p>
                    </header>
                    <form onSubmit={handleSubmit}>
                        <div className={loadingComponentClass}>
                            <div className="content">
                                <div className="is-component-loading"></div>
                            </div>
                        </div>
                        <div className={formComponentClass}>
                            <div className="content">
                                <div className="field is-horizontal">
                                    <div className="field-label">
                                        <label className="label">
                                            Name
                                        </label>
                                    </div>
                                    <div className="field-body">
                                        <div className="field">
                                            <div className="control">
                                                <Field className="input" name="name" component="input" type="text" placeholder="Name" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="field is-horizontal">
                                    <div className="field-label">
                                        <label className="label">
                                            ID Type
                                        </label>
                                    </div>
                                    <div className="field-body">
                                        <div className="field">
                                            <div className="control">
                                                <div className="select is-fullwidth">
                                                    <Field className="input" name="owner_id_type" component="select">
                                                        {this.renderIdTypes()}
                                                    </Field>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="field is-horizontal">
                                    <div className="field-label">
                                        <label className="label">
                                            NRIC
                                        </label>
                                    </div>
                                    <div className="field-body">
                                        <div className="field">
                                            <div className="control">
                                                <Field className="input" name="nric" component="input" type="text" placeholder="NRIC" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="field is-horizontal">
                                    <div className="field-label">
                                        <label className="label">
                                            Car Plate
                                        </label>
                                    </div>
                                    <div className="field-body">
                                        <div className="field">
                                            <div className="control">
                                                <Field className="input" name="car_plate" component="input" type="text" placeholder="Car Plate" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="field is-horizontal">
                                    <div className="field-label">
                                        <label className="label">
                                            Mileage
                                        </label>
                                    </div>
                                    <div className="field-body">
                                        <div className="field">
                                            <div className="control">
                                                <Field className="input" name="mileage" component="input" type="text" placeholder="Mileage" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <footer className="card-footer">
                            <a className="card-footer-item">Reset</a>
                            <a className="card-footer-item">Save</a>
                        </footer>
                    </form>
                </div>
            );
        }
    }
    
    TicketForm = reduxForm({
        form: 'TicketForm'  // a unique identifier for this form
    })(TicketForm)
    
    export default CSSModules(TicketForm, styles)

＆＃13;

＆＃13;

＆＃13;

Answer 1

我找到了解决问题的方法。基本上我只是将我的表单移动到另一个功能组件，如下面的代码。我的原始组件将呈现加载指示符，即renderLoading函数和Form取决于从父级传递的道具。

import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import {Field, reduxForm} from 'redux-form';
import {ID_TYPE_COLLECTION} from 'utilities/constant';

import styles from './TicketForm.scss';

let Form = ({handleSubmit}) => {
    const renderIdTypes = () => {
        return ID_TYPE_COLLECTION.map(idType => {
            return <option key={idType.value} value={idType.value}>{idType.title}</option>;
        });
    }

    return (
        <form onSubmit={handleSubmit}>

            <div className="card-content">
                <div className="content">
                    <div className="field is-horizontal">
                        <div className="field-label">
                            <label className="label">
                                Name
                            </label>
                        </div>
                        <div className="field-body">
                            <div className="field">
                                <div className="control">
                                    <Field className="input" name="name" component="input" type="text" placeholder="Name" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="field is-horizontal">
                        <div className="field-label">
                            <label className="label">
                                ID Type
                            </label>
                        </div>
                        <div className="field-body">
                            <div className="field">
                                <div className="control">
                                    <div className="select is-fullwidth">
                                        <Field className="input" name="owner_id_type" component="select">
                                            {renderIdTypes()}
                                        </Field>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="field is-horizontal">
                        <div className="field-label">
                            <label className="label">
                                NRIC
                            </label>
                        </div>
                        <div className="field-body">
                            <div className="field">
                                <div className="control">
                                    <Field className="input" name="nric" component="input" type="text" placeholder="NRIC" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="field is-horizontal">
                        <div className="field-label">
                            <label className="label">
                                Car Plate
                            </label>
                        </div>
                        <div className="field-body">
                            <div className="field">
                                <div className="control">
                                    <Field className="input" name="car_plate" component="input" type="text" placeholder="Car Plate" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="field is-horizontal">
                        <div className="field-label">
                            <label className="label">
                                Mileage
                            </label>
                        </div>
                        <div className="field-body">
                            <div className="field">
                                <div className="control">
                                    <Field className="input" name="mileage" component="input" type="text" placeholder="Mileage" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer className="card-footer">
                <a className="card-footer-item">Reset</a>
                <a className="card-footer-item">Save</a>
            </footer>
        </form>
    );
}

Form = reduxForm({
    form: 'TicketForm'  // a unique identifier for this form
})(Form)

class TicketForm extends Component {
    renderLoading() {
        return (
            <div>
                <div className="card-content">
                    <div className="content">
                        <div className="is-component-loading"></div>
                    </div>
                </div>
                <footer className="card-footer">
                    <a className="card-footer-item">Reset</a>
                    <a className="card-footer-item">Save</a>
                </footer>
            </div>
        )
    }

    render() {
        const {loading, initialValues} = this.props;

        const component = loading
                ? this.renderLoading()
                : <Form initialValues={initialValues} />;

        return (
            <div className="card">
                <header className="card-header">
                    <p className="card-header-title">
                        Ticket
                    </p>
                </header>
                {component}
            </div>
        );
    }
}

export default CSSModules(TicketForm, styles)