Дождитесь ответа функции, затем измените состояние в componentDidUpdate

Question

Я хотел бы проверить, существует ли изображение в функции componentDidUpdate, и вернуть true или false.

    componentDidUpdate(prevProps){
    if(prevProps.loadedGroup !== this.props.loadedGroup 
        || prevProps.loadedGroupErrors !== this.props.loadedGroupErrors){
            let image = false;
            if(this.props.loadedGroup.picture !== null){
                if(this.props.loadedGroup.picture.fullResolutionPicName !== undefined){
                        //image = true; //have to be true to print image - false showing placeholder
                        image = checkImage(apiPicturesUrl + this.props.loadedGroup.picture.fullResolutionPicName)
                 }
            }

        this.setState({loadedData: this.props.loadedGroup, 
            loadingGroupDataSpinner: false, loadedPosts: this.props.loadedGroup.posts ,
            showBackdrop: false, openEditPlace: false, openEditPlaceDesc: false, 
            bgImageLoadedSucces: image});        
    }
}

И моя функция checImage.

function checkImage(src){
var image = new Image(); 
image.src = src;
    if (image.width === 0) {
        alert("no image");
        return false;
    }else{
        return true;
    }
}

Существуетпроблема в том, что эта функция выполняется асинхронно, и когда я проверяю ширину img, она не обновлялась до сих пор, даже если изображение есть.

Как правильно написать его без setTimeout?

Answer 1

Коротко - использовать image.onload событие.

// Replace this code
image = checkImage(apiPicturesUrl + this.props.loadedGroup.picture.fullResolutionPicName)

// with
image = new Image();
image.onload = () => this.setState({
// here you can be sure, that image is loaded, and set components state with data you need
});
image.src = apiPicturesUrl + this.props.loadedGroup.picture.fullResolutionPicName;

// Note, that it is important to have `onload` and `src` lines be written right in this order.
// First you register event handler, then you set the `src`