Question

我在模式窗口中有一个表单，将Form.Items作为道具发送到该窗口。然后在控制台中记录了两个错误：

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要解决此问题，请在componentWillUnmount方法中取消所有订阅和异步任务。在通知中
未捕获的不变变量：对象作为React子对象无效（找到：带有键{firstName，secondName，Login，Email}的对象）。如果要渲染子级集合，请改用数组。跨度在div 在div中（通过Notice创建）在div中（通过Notice创建）在通知中（通过通知创建）在AnimateChild中（由Animate创建） ...

 createModal = getFieldDecorator => (
    <Form layout="vertical">
      {generateInputFormItems(
        ['First name', 'Second name', 'Login', 'Email'],
        getFieldDecorator,
        this.state.defaultValueForForm, //initial
      )}
      <Form.Item label="Role">
        {getFieldDecorator('role', {
          rules: [{ required: true, message: 'Please select the role' }],
          initialValue: this.state.defaultValueForForm
            ? // eslint-disable-next-line no-underscore-dangle
              this.state.defaultValueForForm.role && this.state.defaultValueForForm.role._id
            : undefined,
        })(
          <Select
            placeholder="Please select role"
            showSearch
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {this.props.allRoles.map(({ _id, name }) => (
              <Option key={_id} value={_id}>
                {name}
              </Option>
            ))}
          </Select>,
        )}
      </Form.Item>
    </Form>
  );

函数，它从标签创建我的Form.Items

export function generateInputFormItems(labels, getFieldDecorator, defaultValues) {
  return labels.map(item => {
    const camelCaseItem = toCamelCase(item);
    return (
      <Form.Item key={item} label={item}>
        {getFieldDecorator(camelCaseItem, {
          initialValue: defaultValues ? defaultValues[camelCaseItem] : '',
          rules: [
            {
              required: true,
              message: `Please input the ${item}`,
            },
            {
              validator: item === 'Email' ? handleEmail : null,
            },
          ],
        })(<Input placeholder={`Input the ${item}`} />)}
      </Form.Item>
    );
  });
}

模式窗口中的表单 formFields-方法，用于创建表单（createModal）

import React from 'react';
import { Modal, Form } from 'antd';

export default Form.create({ name: 'form_in_modal' })(
  class extends React.PureComponent {
    render() {
      const {
        visible,
        loading,
        handleOk,
        handleCancel,
        form,
        formFields,
        title,
        okText,
      } = this.props;
      const { getFieldDecorator } = form;

      return (
        <Modal
          visible={visible}
          confirmLoading={loading}
          title={title}
          okText={okText}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          {formFields(getFieldDecorator)}
        </Modal>
      );
    }
  },
);

<FormsModal visible={isVisible}
          loading={creatingUser}
          handleOk={this.handleOk}
          handleCancel={this.handleCancel}
          formFields={this.createModal}
          wrappedComponentRef={this.saveFormRef}
          title={defaultValueForForm ? 'Edit' : 'Create'}
          okText={defaultValueForForm ? 'Edit' : 'Create'}
        ></FormsModal>

当validateFields调用时，当数据无效时记录2个错误（React，Antd）

0 个答案: