React-Native проверьте URL изображения

Question

Я пытаюсь проверить, является ли URL-адрес изображения 404 или нет. Проблема в том, что функция возвращает неопределенное значение. Почему это происходит?

Если я console.log о состоянии res, он показывает 404, поэтому выполняется оператор if.

function checkImageURL(url){
 fetch(url)
    .then(res => {
    if(res.status == 404){
      console.log(res.status)
      return <Image source={require('./Images/default.png')}/>
    }else{
      return <Image source={{uri: `${url}`}}  />
   }
 })
}

Answer 1

На самом деле, вам не нужно проверять, не является ли статус ответа изображения 404, чтобы отображать его.Вам просто нужно получить ваши данные и сохранить их в вашем состоянии, а затем, если вы проверите, может ли изображение отображаться, как в примере ниже.

Я не совсем то, что вы пытаетесь построить, но, по моему мнению,Вы никогда не должны делать запрос на получение изображения.

import React, { Component } from 'react';
import { Image } from 'react-native';
import defaultImg from './image.png';

export default class Example extends Component {
  state = {
    image: 'some-url',
  }

  render() {
    const { image } = this.state;

    return(
     <Image 
       source={image ? { uri: image } : defaultImg}
       style={{ height: 200, width: 200 }}
     />
    )
  }
}

Answer 2

вы ничего не возвращаете при ответе об ошибке.

добавить .catch и вернуть в него компонент или ноль. например,

function checkImageURL(url){
 fetch(url)
    .then(res => {
    if(res.status == 404){
      return <Image source={require('./Images/default.png')}/>
    }else{
      return <Image source={{uri: `${url}`}}  />
   }
 })
.catch(err=>{return <Image source={require('./Images/default.png')}/>})
}