Материал-UI-номер телефона не смонтированный компонент - PullRequest
Новая
       9

Материал-UI-номер телефона не смонтированный компонент

0 голосов
/ 22 февраля 2019

Новичок в РЕАГИРОВАНИИ, так что потерпите меня, пожалуйста:

Я получаю следующую ошибку после добавления плагина material-ui-phone-number : 

Uncaught Invariant Violation: Unable to find node on an unmounted component.
    at invariant (http://localhost:8080/public/bundle.js:96969:15)

Функция рендеринга моего компонента выглядит следующим образом: 

  class CreateUserDialog extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        defaultValues: {
          username: '',
          name: '',
          phone: ''
        }
      };

      this.handlePhoneChange = this.handlePhoneChange.bind(this);
   }
   handlePhoneChange(value) {
     if (value) {
      this.setState({ phone: value});
     }
   }
   render() {
    return (
     <Dialog open={this.props.open} onClose={this.props.onClose}>
      <DialogTitle title="New User" />
      <DialogContent>
      <Formik
        initialValues={this.state.defaultValues}
        onSubmit={values => {
          this.props.onSubmit(values);
        }}
        validateOnBlur
        validate={values => {
          const errors = {};
          return errors;
        }}
        render={() => (
          <Form>
            <Grid container direction="column" className={this.props.classes.dialogContainer}>
              <Grid container>
                <Grid item xs>
                  <TextField name="name" label="Name" required data-cy="user-firstname" />
                </Grid>
              </Grid>
              <MuiPhoneNumber name="phone" label="Phone Number" data-cy="user-phone" defaultCountry={"us"} onChange={this.handlePhoneChange} />
              <TextField name="username" label="Username" required data-cy="user-username" />
              <Grid container justify="flex-end" className={this.props.classes.buttonContainer}>
                <Button
                  color="primary"
                  className={this.props.classes.cancelButton}
                  data-cy="cancel-create-user"
                  onClick={this.props.onClose}
                >
                  Cancel
                </Button>
                <Button variant="contained" color="primary" type="submit" data-cy="create-user">
                  Create New User
                </Button>
              </Grid>
            </Grid>
          </Form>
        )}
      />
    </DialogContent>
  </Dialog>
 );
}
}
CreateUserDialog.propTypes = {
  classes: PropTypes.object.isRequired,
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
};
export default withStyles(styles)(CreateUserDialog);

Как мне заставить это работать внутри этой базы кода (кроме примера, приведенного в README)?

1 Ответ

0 голосов
/ 22 февраля 2019

Мне не удалось воспроизвести вашу ошибку, но вот CodeSandbox, который, кажется, работает: https://codesandbox.io/s/0x7mqonlw0

Единственное изменение, которое я сделал, кроме добавления группы импорта, было добавить value реквизит по номеру телефона: 

        <MuiPhoneNumber
            name="phone"
            label="Phone Number"
            data-cy="user-phone"
            defaultCountry={"us"}
            value={this.state.phone}
            onChange={this.handlePhoneChange}
          />

Я думаю, однако, что мне повезло, что это сработало для меня.Есть некоторые заметные проблемы с пакетом material-ui-phone-number.Он имеет React и Material-UI в качестве зависимостей, а не peerDependencies, и версии, которые у него есть, не являются актуальными, так что вы, скорее всего, в конечном итоге получите две версии React и Material-UI, если у вас также естьони указаны в вашем собственном package.json.Наличие двух версий React может вызвать множество возможных проблем.

Пакет material-ui-phone-number не пользуется популярностью, что означает, что может возникнуть множество других проблем, ожидающих вас, если вы продолжите пытаться использовать этот пакет..

...