Почему не всегда обновляется картинка в React?

Question

[Denoro55]

Я с помощью axios отправляю файл картинки на сервер

export const uploadPhoto = ({file}) => {
    const formData = new FormData();
    formData.append('file',file);
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    }
    return (dispatch) => {
        return axios.post(`${apiUrl}/uploadavatar`,formData,config)
        .then(response => {
          setTimeout(function(){
            dispatch({type: 'USER_INFO', info: response.data})
          },300)
          
        })
        .catch(error => {
            console.log(response)
            throw(error);
        });
    };
};

Сделал небольшой таймаут до dispatch ( вероятность того, что загруженная фотка отобразится сразу на странице возрастает )
Вот на сервере записываю изображение

fs.mkdirs(currpath,function(err){

            let form = new formidable.IncomingForm();
            form.uploadDir = path.join(process.cwd(),currpath);

            form.parse(req);

            form.on('fileBegin', function (name, file){
                console.log('begin')
                file.path = path.join(dir,namedir,file.name);
            });

            form.on('progress', function(bytesReceived, bytesExpected) {
                var percent_complete = (bytesReceived / bytesExpected) * 100;
                // console.log(percent_complete.toFixed(2));
            });

            form.on('file', function (name, file){

                console.log('Uploaded ' + file.name);

                res.send('success');

            });
})

Далее получаю ответ > timeout > dispatch > новый render страницы с изображением
Проблема в том что иногда картинку не находит (404 not found). Хотя если нажать в консоли и открыть ее она есть. Как можно корректно исправить ? Я еще записываю пути картинок в базу данных Mongoose и если обновить страницу то картинка в любом случае появится но хотелось бы что бы 100% без перезагрузки отображалась после отправки формы

Comments

[Алексей Лауд]

Попробуйте поменять событие с file на end. Возможно, к тому моменту, когда вы пытаетесь отображать картинку, она еще не записалась на сервер.

[Denoro55]

Алексей Казаков, добавил, тоже самое. а даже если потом поменять state и сделать новый рендер картинка не отобразится все равно. Хотя если через девтулс скопировать и вставить на страницу ту же картинку то она отобразится))
Попробавл добавить к картинке OnError = перерендерить ошибка на второй раз пропадает но картинки так и нет

[Алексей Лауд]

Denoro55, а каким образом адрес картинки попадает в компонент, который ее выводит?

[Denoro55]

Алексей Казаков, когда приходит ответ о том, что картинка загружена ( ну а там же и в базу данных записался путь ) то выполняется запрос на сервер this.props.onGetInfo(this.props.userID) откуда берется этот путь и вставляется в путь картинки
Вот код начала отправки картинки: ( по приходу ответа запрашиваю тот самый новый адрес картинки)

onFormSubmit(e){
		e.preventDefault() // Stop form submit
		this.fileUpload(this.state.file).then((response)=>{
			console.log('getting new picture')
			setTimeout(()=>{
				this.props.onGetInfo(this.props.userID);
			},500)
		})
	}

	fileUpload(file){
		console.log(file)
		const url = 'http://localhost:8080/uploadavatar';
		const formData = new FormData();
		formData.append('file',file)
		const config = {
			headers: {
				'content-type': 'multipart/form-data'
			}
		}
		return post(url, formData,config)
	}

onGetInfo: (name) => {
	dispatch(fetchInfo(name));
}

Далее axios который и берет нужный адрес мне картинки и диспатчит ее

export const fetchInfo = (name) => {
  return (dispatch) => {
    console.log(`${apiUrl}/userinfo/${name}`)
    return axios.get(`${apiUrl}/userinfo/${name}`)
      .then(response => {
        console.log('new image url: '+response.data)
        dispatch({type: 'USER_INFO', info: response.data})
      })
      .catch(error => {
        throw(error);
      });
  };
};

И вот приходит путь в итоге и вставляется в картинку и если ошибка берем снова адрес по новой для того чтобы еще раз отрендерить

onError(){
    	this.props.onGetInfo(this.props.userID);
    }
render(){
{ this.props.info ? 
			image = <img onError={this.onError.bind(this)} src={`/images/upload/${this.props.userID}/${this.props.info[this.props.info.length-1]}`} alt=""/> : image = null
		}
{image}
}

И вот еще код куда диспачится

export default function postReducer(state = [], action) {
  switch (action.type) {
    case 'USER_INFO':
      return [...state,action.info];
    default:
      return state;
  }
}

Тут я сделал чтобы добавляло в массив картинки и выводило последний элемент, это чтобы перередерило думал поможет, но нет.