Как вызвать модальный ответ функции в React?

Question

Я хочу вызвать что-то вроде вызова функции внутри ответа, чтобы я мог открыть модальное окно. Я использую материал UI для модального.

Модальный

Поток идет с чем-то вроде

1. Нажмите на кнопку
2. Отправить запрос
3. Получить ответ и отобразить сообщение в модале.

Модал существует как отдельный компонент, поэтому я не могу сделать

.then( e => {
        <Modal />
       })

Попытка включить модальный хук в тот же файл, но нене так.

axios
      .post(`${url}`, {
        email: email
      })
      .then(res => {
        if (res.data.type === "account not found") {
          <WarningModal />
        } else if (res.data.type === "email sent") {
          <SuccessModal />
        }
      });

Просто хочу вызывать модальные компоненты при получении ответа.

Answer 1

Добавьте 2 переменные состояния для обоих модалов и установите их true в вызове axios, также добавьте модал к возвращаемому.

const test = () => {
    const [showSuccessModal, setShowSuccessModal] = useState(false)
    const [showWarningModal, setShowWarningModal] = useState(false)


    axios
      .post(`${url}`, {
        email: email
      })
      .then(res => {
        if (res.data.type === "account not found") {
          setShowWarningModal(true)
        } else if (res.data.type === "email sent") {
            setShowSuccessModal(true)
        }
      });

    return (
        <div>
            <WarningModal open={showWarningModal}/>
            <SuccessModal open={showSuccessModal} />
        </div>
    )

}

Answer 2

Как вы, возможно, заметили, компонент Modal из material-ui принимает реквизит open, указывающий, открыт модал или нет.

Итак, вам нужно поставить модалгде-то в вашем JSX с open prop, установленным в логическое значение, полученное из состояния вашего компонента. И когда вы получите ответ от вашего HTTP-вызова, вы переключите это логическое значение на true, и появится модальное значение.

Answer 3

То, что вы хотите сделать, это:

1. Добавьте ваш Modal компонент в функцию рендеринга вашего компонента. Вот так:
2. Подключите open реквизит компонента Modal к состоянию, назовите его openModal. Теперь у вас есть this.state.openModal.
3. По ответу на запрос выполните this.setState({openModal: true})
4. Модал должен открыться.

У вас должно быть что-токак это:

render() => {
       return (
          ...
          <Modal open={this.state.openModal}/>
       )
    }