react js中API空响应的条件渲染

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

声明一个新的状态变量

 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>
    )
}

Answer 2

在没有找到任何内容的情况下注销 res.data 对象。它可能不是您的代码假定的空数组，但可能包含一些消息，表明数据库中没有任何内容与您的查询匹配。您需要检查这一点，而不是简单地检查 !res.data。