Как я могу добавить условие в модал с помощью bootstrap-4-реагировать?

Question

Мне нужно добавить условие в модал, используя bootstrap-4-реагировать, но модал всегда появляется без учета используемого условия.Я покажу, что у меня есть на данный момент:

import Boostrap, { Modal } from 'bootstrap-4-react';
.
.
.
class Home extends Component {
.
.
.
componentDidMount() {
    Boostrap.modal("#signupModal", 'toggle')
  }
.
.
.
    render() {
      return (
         <div className="Home">
          <Modal show={achieveDreams && achieveDreams.length === 0} id="signupModal" fade>
            <Modal.Dialog>
              <Modal.Content>
                <Modal.Header>
                  <Modal.Title>
                <strong style={{ color: "#fff" }}>{"¡congratulation!".toUpperCase()}</strong>
                  </Modal.Title>
                  <Modal.Close>
                    <span aria-hidden="true">&times;</span>
                  </Modal.Close>
                </Modal.Header>
                <Modal.Body style={{ color: "#fff" }}>
                  Activate button.
                </Modal.Body>
              </Modal.Content>
            </Modal.Dialog>
          </Modal>
        </div>
      );
    }
  }

В этот момент, когда я запускаю этот develompent, ошибка в консоли выглядит следующим образом:

В настоящее время условие не работает должным образом.Если кто-то знает, как правильно настроить режим, я был бы очень признателен.

Answer 1

Как уже говорилось в предупреждении, вы должны сделать это,

show={achieveDreams && achieveDreams.length === 0 ? true : false}

Примечание: Я сомневаюсь в этом условии achieveDreams && achieveDreams.length === 0.

Что это за условие,, если achieveDreams (имеет значение / не равно нулю) И achieveDreams.length === 0.

Так что я думаю, что это условие всегда будет false, ваше состояние должно быть таким,

show={achieveDreams && achieveDreams.length !== 0 ? true : false}

---

Обновление

Из документы ,

Я не видел ни одного варианта использования, который вы используете, из документов мы видим, что у вас есть только 2 варианта использования модальных.

1. Через атрибуты данных,

   <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

2. Через JavaScript,

   Bootstrap.modal('#myModal', options);

Итак, ваша попытка использовать опору show на модале здесь недопустима. Использование show prop на модале не влияет на ваш модал, вы должны удалить его .

Ваш модал отображается из-за Bootstrap.modal('#myModal', options); в componentDidMount.

Вы должны иметь условие в componentDidMount как,

componentDidMount() {
  //considering `achieveDreams` is in state only, 
  //if `achieveDreams` is coming from `props` you should use `this.props.achieveDreams && this.props.achieveDreams.length !== 0`
  if(this.state.achieveDreams && this.state.achieveDreams.length !== 0){ 
     Boostrap.modal("#signupModal", 'toggle')
  }   
}

---

Обновление 2

Согласно комментарию "reachDreams false" "reachDreams.lenth 0" Модальное значение должно отображаться, если вышеприведенное верно.

Вы должны быть такими,

componentDidMount() {
  //considering `achieveDreams` is in state only, 
  //if `achieveDreams` is coming from `props` you should use `this.props.achieveDreams && this.props.achieveDreams.length === 0`
  if(this.state.achieveDreams && this.state.achieveDreams.length === 0){ 
     Boostrap.modal("#signupModal", 'toggle')
  }   
}

Демо

Answer 2

Насколько я вижу, reachDreams не определен, пожалуйста, попробуйте использовать this.state.achieveDreams && this.state.achieveDreams.length === 0, и он будет работать нормально.

Для справки, вы можете взглянуть на следующую песочницу: https://codesandbox.io/s/mystifying-bash-6e2wq

Примечание. Вы монтируете модальное значение в componentDidMount, чтобы оно всегда отображалось, условие показа не будет работать должным образом, также необходимо добавить условие в componentDidMount следующим образом:

if (this.state.achieveDreams && this.state.achieveDreams.length === 0) {
    Boostrap.modal("#signupModal", "toggle");
}