Question

REACT的新手，请多多包涵：

添加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);

如何使它在此代码库中起作用（除了自述文件中的示例）？

Answer 1

我无法重现您的错误，但这是一个似乎可以正常工作的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包一点也不受欢迎，这意味着如果您继续尝试使用此包，可能还会有很多其他问题在等待您。

物料用户界面电话号码未安装的组件

1 个答案: