Показать всплывающее окно семантической-пользовательской реакции без нажатия кнопки или тега привязки: React + Typescript

Question

Попытка вывести всплывающее окно с надписью «No Data Found», если нет данных из внутреннего API. Я не могу этого добиться. Помощь будет оценена. Здесь я использую вызов выборки для извлечения данных. Если есть данные, тогда установите объект состояния, иначе установите логический флаг modalOpen в значение true. Но это не похоже на работу. Это показывает пустой экран.

import * as React from 'react';
import Modal from 'semantic-ui-react';

interface IState{
  modalOpen: boolean;
  data: [];
}

export default class Test extends React.Component<{},{}> {

   constructor(props:any){
     super(props);
     this.state = { modalOpen: false , data: [] }
   }

   handleOpen = () => this.setState({ modalOpen: true })

   handleClose = () => this.setState({ modalOpen: false }) 

   async componentDidMount(){
      try {       
             let data = await fetch('/api/fetch')
             let res =  await data.json();
             if(res.length>0){  
                     this.setState({ data: json }, modalOpen: false)
              }
              else if(res.length == 0 ) {
                       this.setState({ modalOpen:true})
              }
              else {
                       this.setState({ modalOpen:false})
              }
     }
     catch(e){
         console.log('Error', e.message);
     }
   }

   render()
   {
     return(
            <Modal
               trigger= {this.state.modalOpen}
               open={this.state.modalOpen}
               onClose={this.handleClose}
               basic
               size='small'
            />
            <Modal.Content>
              <h3>No Data</h3>
           </Modal.Content>
           //Displaying results part is not shown here
     )
   }
}

Answer 1

Вы пытались оставить атрибут триггера на модальном элементе прочь?Насколько я знаю, этот атрибут должен ссылаться на действительный элемент JSX, например кнопку или что-то в этом роде.

Примерно так:

<Modal
   open={this.state.modalOpen}
   onClose={this.handleClose}
   basic
   size='small'
/>

Answer 2

Измените this.setState({ data: json } на this.setState({ data: res.data }

проверьте ответ или res или res.data зависит от того, что ваш сервер возвращает ..?