Question

我正在构建一个React js应用程序，用户可以在其中选择一些过滤器并相应地获取响应。对于用户选择的某些值，从数据库中找不到任何内容，我想显示“未找到任何内容”消息。

我尝试使用if和else条件运算符，但不会产生结果。下面是代码。

        .then(res => {
            if(!res.data.length){
                return(
                    <div>
                        <h1>nothing found.</h1>
                    </div>
                )
            }
            else{
            this.setState({ data: res.data,urlList:[] }) 
            console.log(this.state)  
            }                                                                    
        })

现在，如果我这样做

        .then(res => {
            if(!res.data.length){
                console.log('nothing found')

            }
            else{
            this.setState({ data: res.data,urlList:[] }) 
            console.log(this.state)  
            }                                                                    
        })

我在控制台上收到响应。我做错了什么？

Answer 1

注销res.data对象，以防万一。它可能不是您的代码假定的空数组，但可能包含一些消息，表示数据库上没有任何内容与您的查询匹配。您需要检查而不是仅检查！res.data。

Answer 2

声明一个新的状态变量，例如

 constructor(props){
      super(props);
      this.state = {
          noData: ''
      }
 }

还有这里

   .then(res => {
        if(!res.data.length){
            this.setState({noData: 'nothing found'});
            console.log('nothing found')

        }
        else{
        this.setState({ data: res.data,urlList:[], noData: '' }) 
        console.log(this.state)  
        }                                                                    
    })

然后在渲染中只显示this.state.noData

render(){
    return(
          <div>
               <h1>{this.state.noData}</h1>
          </div>
    )
}

React js中API空响应时的条件渲染

2 个答案: