时间戳

首页 > 解决方案 > React-final-form：警告：React 无法识别 DOM 元素上的“initialValues”道具

reactjs - React-final-form：警告：React 无法识别 DOM 元素上的“initialValues”道具

问题描述

我试图以初始值的形式传递。有了这个，我得到一个警告，并且初始值没有被初始化。

index.js:1452 Warning: React does not recognize the `initialValues` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `initialvalues` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in form (at AddressForm.js:48)
    in ReactFinalForm (at AddressForm.js:27)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in AddressForm (at AddressesList.js:103)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in AddressesList (at ContactsDetailsModule.js:96)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in div (at LayoutDetailsContainer.js:28)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Context.Consumer)
    in StyledComponent (created by Styled(WithStyles(Paper)))
    in LayoutDetailsContainer (at ContactsDetailsModule.js:66)
    in ContactsDetailsModule (at ClientContacts.js:94)
    in div (at ClientContacts.js:93)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in div (at ClientPage.js:56)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in div (at LayoutPage.js:14)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in LayoutPage (at ClientPage.js:53)
    in Client (created by Route)
    in Route (created by withRouter(Client))
    in withRouter(Client) (created by Connect(withRouter(Client)))
    in Connect(withRouter(Client)) (at ClientContacts.js:82)
    in ClientContacts (created by Route)
    in Route (created by withRouter(ClientContacts))
    in withRouter(ClientContacts) (created by Connect(withRouter(ClientContacts)))
    in Connect(withRouter(ClientContacts)) (at PrivateRouter.js:10)
    in Route (at PrivateRouter.js:6)
    in PrivateRoute (at routes.js:22)
    in Switch (at routes.js:15)
    in Router (created by BrowserRouter)
    in BrowserRouter (at routes.js:14)
    in Routes (at App.js:17)
    in div (at App.js:16)
    in ThemeProvider (at App.js:15)
    in MuiThemeProvider (at App.js:14)
    in App (at src/index.js:36)
    in Provider (at src/index.js:35)
function.console.(anonymous function) @ index.js:1452
warningWithoutStack @ react-dom.development.js:536
warning @ react-dom.development.js:2791
validateProperty$1 @ react-dom.development.js:7511
warnUnknownProperties @ react-dom.development.js:7554
validateProperties$2 @ react-dom.development.js:7577
validatePropertiesInDevelopment @ react-dom.development.js:7621
setInitialProperties @ react-dom.development.js:7885
finalizeInitialChildren @ react-dom.development.js:9038
completeWork @ react-dom.development.js:15063
completeUnitOfWork @ react-dom.development.js:17056
performUnitOfWork @ react-dom.development.js:17270
workLoop @ react-dom.development.js:17281
renderRoot @ react-dom.development.js:17359
performWorkOnRoot @ react-dom.development.js:18252
performWork @ react-dom.development.js:18159
performSyncWork @ react-dom.development.js:18132
interactiveUpdates$1 @ react-dom.development.js:18442
interactiveUpdates @ react-dom.development.js:2320
dispatchInteractiveEvent @ react-dom.development.js:5130

通过将初始值传递给表单，我做错了什么？

这是我使用的代码：

父组件：

class AddressesList extends Component {
  state = {
    isEditModeAddress: false,
  };

  onToggleEditMode = () => {
    const { isEditModeAddress } = this.state;

    this.setState({
      isEditModeAddress: !isEditModeAddress,
    });
  };

  onCancel = id => () => {};

  onSubmit = values => {
    console.log('values', values);
  };

  renderAddress = () => {
    const { isEditModeAddress } = this.state;
    const { isEditMode, address } = this.props;

    console.log('address', address);

    return (
      <ListItem className="ListItem">
        <ListItemIcon>
          <LocationOnIcon className="icon" />
        </ListItemIcon>
        <div className="address-item">
          <div className="address-street">
            {address.HouseNum || ''} {address.Street || ''}
          </div>
          <div className="address-state">
            {address.City || ''} {address.State || ''} {address.Zip || ''}
          </div>
        </div>
        <ListItemSecondaryAction className="control">
          {isEditMode &&
            !isEditModeAddress && (
            <IconButton
              className="btn btn-edit"
              aria-label="edit"
              onClick={this.onToggleEditMode}
            >
              <EditIcon fontSize="small" />
            </IconButton>
          )}
        </ListItemSecondaryAction>
      </ListItem>
    );
  };

  render() {
    const { isEditModeAddress } = this.state;
    const { isEditMode, address } = this.props;

    const initialValues = {
      houseNumber: 'test value',
      street: 'test value',
      unit: 'test value',
      city: 'test value',
      zip: 'test value',
    };

    return (
      <Styles className="AddressesList" isEditMode={isEditMode}>
        <ListHeader title="Addresses" />
        {address && (
          <List dense className="list">
            {this.renderAddress()}
          </List>
        )}
        {isEditModeAddress && (
          <AddressForm
            onSubmit={this.onSubmit}
            initialValues={initialValues}
            cancel={this.onToggleEditMode}
          />
        )}
        {!address && (
          <Typography variant="subheading" className="no-data" gutterBottom>
            Contact has no address
          </Typography>
        )}
      </Styles>
    );
  }
}

表单组件：

const AddressForm = ({ onSubmit, initialValues, cancel }) => (
  <Styles>
    <Form
      onSubmit={onSubmit}
      validate={values => {
        const errors = {};

        const isNumber = value => Number.isInteger(Number(value));

        const onlyNumber = 'Must be an integer';

        if (values.houseNumber && !isNumber(values.houseNumber)) {
          errors.houseNumber = onlyNumber;
        }
        if (!values.street) {
          errors.street = 'Required';
        }
        if (values.zip && !isNumber(values.zip)) {
          errors.zip = onlyNumber;
        }
        return errors;
      }}
      render={({ handleSubmit, form, submitting, values }) => (
        <form
          onSubmit={handleSubmit}
          initialValues={initialValues}
          className="address-form"
        >
          <div className="fields">
            <Field name="houseNumber">
              {({ input, meta }) => (
                <TextField
                  error={meta.error && meta.touched}
                  helperText={meta.touched ? meta.error : undefined}
                  label="House #"
                  {...input}
                  type="text"
                  placeholder="House Number"
                  className="field field-house-number dense"
                  margin="dense"
                  variant="outlined"
                />
              )}
            </Field>
            <Field name="street">
              {({ input, meta }) => (
                <TextField
                  error={meta.error && meta.touched}
                  helperText={meta.touched ? meta.error : undefined}
                  label="Street"
                  {...input}
                  type="text"
                  placeholder="Street Name"
                  className="field field-street dense"
                  margin="dense"
                  variant="outlined"
                />
              )}
            </Field>
            <Field name="unit">
              {({ input, meta }) => (
                <TextField
                  error={meta.error && meta.touched}
                  helperText={meta.touched ? meta.error : undefined}
                  label="Unit #"
                  {...input}
                  type="text"
                  placeholder="Unit #"
                  className="field field-house-unit dense"
                  margin="dense"
                  variant="outlined"
                />
              )}
            </Field>
            <Field name="city">
              {({ input, meta }) => (
                <TextField
                  error={meta.error && meta.touched}
                  helperText={meta.touched ? meta.error : undefined}
                  label="City"
                  {...input}
                  type="text"
                  placeholder="City"
                  className="field dense"
                  margin="dense"
                  variant="outlined"
                />
              )}
            </Field>
            <Field name="State">
              {({ input, meta }) => (
                <TextField
                  select
                  label="Select"
                  className="field dense"
                  value="State"
                  // onChange={this.handleNewChangeSelect}
                  SelectProps={{
                    MenuProps: {
                      className: 'select12345',
                    },
                  }}
                  margin="dense"
                  variant="outlined"
                >
                  <MenuItem value="State">State</MenuItem>
                </TextField>
              )}
            </Field>
            <Field name="zip">
              {({ input, meta }) => (
                <TextField
                  error={meta.error && meta.touched}
                  helperText={meta.touched ? meta.error : undefined}
                  id="outlined-dense"
                  label="Zip Code"
                  {...input}
                  type="text"
                  placeholder="Zip Code"
                  className="field field-house-zip dense"
                  margin="dense"
                  variant="outlined"
                />
              )}
            </Field>
            <pre>{JSON.stringify(values, 0, 2)}</pre>
          </div>
          <div className="buttons">
            <IconButton
              className="btn btn-control-edit"
              aria-label="save"
              type="submit"
              disabled={submitting}
              // onClick={this.onEditField(id)}
            >
              <DoneIcon fontSize="small" />
            </IconButton>
            <IconButton
              className="btn btn-control-edit"
              aria-label="cancel"
              onClick={form.reset}
              onClick={() => cancel()}
            >
              <ClearIcon fontSize="small" />
            </IconButton>
            <IconButton
              className="btn btn-control-edit"
              aria-label="delet"
              // onClick={this.onEditField(email.Id)}
            >
              <DeleteIcon fontSize="small" />
            </IconButton>
          </div>
        </form>
      )}
    />
  </Styles>
);

操作系统：Windows 10

依赖项：

“最终形式”：“^4.10.0”，
“反应”：“^16.5.0”，
“反应域”：“^16.5.0”，
“反应最终形式”：“^3.6.7 ",

标签： reactjsreact-final-formfinal-form

解决方案

您必须为您的组件设置默认道具。

import React, { Component } from 'react';

AddressesList.defaultProps = {
  isEditMode:true,
  address :'Ahemedabad'
};

class AddressesList extends Component {
   render() {
    const { isEditMode, address } = this.props;
    console.log('isEditMode, address',isEditMode, address);

    return (<div>)
   }
}

推荐阅读