условный рендеринг при пустом ответе API в реагировать js

Question

Я создаю небольшое приложение реагирования, в котором пользователи могут выбрать несколько фильтров и соответственно получить ответ.Для некоторых значений, выбранных пользователями, в базе данных ничего не найдено, и я хочу показать сообщение «ничего не найдено».

Я пытался использовать условные операторы 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.