Question

如果后端API中没有数据，则尝试弹出一个“未找到数据”的弹出窗口。我无法实现这一目标。帮助将不胜感激。在这里，我使用fetch调用来获取数据，如果有数据，则设置状态对象，否则将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

您是否尝试过将Modal元素上的trigger属性保留？据我所知，该属性应该引用一个有效的JSX元素，例如按钮或其他东西。

类似这样的东西：

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

Answer 2

将DefaultVideoService.class.getResourceAsStream(pathIni)更改为this.setState({ data: json }

检查响应res还是res.data取决于服务器返回的内容。

显示一个没有按钮或锚标记onclick的语义用户界面反应弹出窗口：React + Typescript

2 个答案: