Материал - пользовательский интерфейс: почему не отображается мой диалог?

Question

У меня есть код, который проверяет, правильно ли заполнена форма - при неправильном заполнении должно появиться всплывающее диалоговое окно, сообщающее пользователю, что оно неправильно заполнено. Я не понимаю, почему у меня это не работает.

Всплывающее окно renderError вызывается в onSubmit.

  state = {
    errorOpen: false,
  }

  toggleErrorModal = () => {
    this.setState(prevState => ({ errorOpen: !prevState.errorOpen }));
  }

 renderError = () => {
    return (

      <Dialog open={this.state.errorOpen} onClose={this.toggleErrorModal}>
        <Grid container >
            <DialogTitle > Form Incomplete </DialogTitle>
          </Grid>

        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            Please fill out the required fields
          </DialogContentText>
        </DialogContent>

        <DialogActions>
          <Button onClick={this.toggleErrorModal} >
            Ok
          </Button>
        </DialogActions>

      </Dialog>
    )
  }



onSubmit = event => {
    event.preventDefault();

    let submit = false;

    /*Code that checks and sets the submit to true/false*/

     if (submit == false) {
        this.setState({errorOpen:true}, ()=> {})
        this.renderError();
      }

  };

Answer 1

В React единственная функция, которая отображает элементы в DOM, - это функция render, которая вызывается при создании экземпляра класса или при вызове setState. Итак, что вы хотите сделать, это поместить то, что вы хотите визуализировать, в функцию render следующим образом:

state = {
    errorOpen: false,
};

toggleErrorModal = () => {
    this.setState((prevState) => ({ errorOpen: !prevState.errorOpen }));
};

onSubmit = (event) => {
    event.preventDefault();

    let submit = false;

    /*Code that checks and sets the submit to true/false*/

    if (submit == false) {
        this.setState({ errorOpen: true }, () => {});
    }
};


render = () => {
    return (
        <div>
            <Dialog open={this.state.errorOpen} onClose={this.toggleErrorModal}>
                <Grid container>
                    <DialogTitle> Form Incomplete </DialogTitle>
                </Grid>

                <DialogContent>
                    <DialogContentText id="alert-dialog-description">Please fill out the required fields</DialogContentText>
                </DialogContent>

                <DialogActions>
                    <Button onClick={this.toggleErrorModal}>Ok</Button>
                </DialogActions>
            </Dialog>
            <div>Put here the content of your page that is visible when the dialog is closed</div>
        </div>
    );
};

Нет необходимости вручную вызывать функцию render после setState, потому что он автоматически запускается React после завершения выполнения setState