Условный рендер Reactjs не отображается, даже если условная переменная установлена ​​точно

Question

Я пытаюсь визуализировать счетчик после события onClick, поэтому значок загрузки будет отображаться, пока работает другая функция (в данном случае моя функция glitcher ()).Моя функция рендеринга ниже.OnClick вызывает обработчик, который устанавливает последовательность состояний, также показанную ниже.

Прямо сейчас onClick вызывает handleGlitch, и состояние glitchLoading правильно установлено в значение true (проверено с помощью вызова console.log в условном выражении), но спиннер не рендерится.

обработчик onClick handleGlitch ():

  handleGlitch() {
    this.setState({ glitchLoading: true }, () => {
      this.glitcher()
    }); 
  } 

Функция визуализации:

render() {
    let previewImage = null;
    let loader = null; 
    if (this.state.originalFiles.length !== 0) {
      previewImage = <img className="folder-icon" src={placeholder} alt="" />;
    }
    if(this.state.glitchLoading) {
      console.log("loading"); 
      loader = <Spinner color="primary" />; 
    }

    return (
      <Container className="previewComponent">
        <Row>
          <Col>
            <legend>
              <b>Upload Images:</b>
            </legend>
            <input
              className="fileInput"
              id="myfileinput"
              type="file"
              onChange={this.handleShow}
              multiple
            />
          </Col>
        </Row>
        <Row>
          <Col className="uploadField">
            <Container className="imgPreview">{previewImage}</Container>
          </Col>
          <Col className="optionField">
            <OptionsForm
              value={this.state.distortion}
              valueChange={value => {
                this.setState({ distortion: value });
              }}
            />
            <Button
              color="danger"
              onClick={this.handleGlitch}
              className="glitch-button"
            >
              Glitch Images
            </Button>
            {loader}
          </Col>
        </Row>
      </Container>
    );
  }

Answer 1

Я нашел решение, совершенно случайно.По какой-то причине сработало обращение к this.glitcher () в setTimeout с задержкой в ​​1 миллисекунду.Смотрите ниже:

handleGlitch() {
    this.setState({ glitchLoading: true }, () => {
      setTimeout(() => {
        this.glitcher()
      }, 1); 
    }); 
  }

Answer 2

Возможно, попробуйте связать это с вашей функцией onClick.OnClick = {this.handleGlitch.bind (это)}