Как запустить повторную визуализацию в React? - PullRequest
Новая
       3

Как запустить повторную визуализацию в React?

0 голосов
/ 08 мая 2020

Идея состоит в том, что я выбираю изображение, которое затем загружается в mongodb, и одновременно с нажатием кнопки загрузки я хочу запустить повторную визуализацию страницы, чтобы аватар обновлялся с новейшим изображением. Чтобы выполнить sh, я сначала отправляю запрос PUT на сервер, а сразу после этого я устанавливаю объект локального хранилища со значениями ответа.

Функции, которые захватывают и загружают изображение 

const [reload, setReload] = React.useState(false);

React.useEffect(() => {}, [reload])

const fileSelectedHandler = evt => setAvatarImage(evt.target.files[0]);

const uploadProfileImage = async evt => {
    evt.preventDefault();

    const formData = new FormData();
    formData.append('image', avatarImage);

    try {
        const response = await axios({
            method: 'PUT',
            url: `${keys.SERVER_URL}/user/avatar/${isAuthenticated()._id}`, 
            data: formData,
            headers: { 'Content-Type': 'multipart/form-data',}
        }); 

        localStorage.setItem(localStorageName, JSON.stringify({ avatar: response.data.user.avatar }));
    } catch (error) {
        console.log(error);
    }
        setReload(prevState => !prevState);
 }

Дело в том, что изображение загружается и отображается корректно. Проблема в том, что после того, как я нажимаю кнопку загрузки, изображение не отображается мгновенно, но мне приходится вручную перезагружать страницу. Вот почему я добавил этот setReload. Таким образом, когда я нажимаю кнопку загрузки, значение переменной reload изменяется, что вызывает перезагрузку в useEffect.

1 Ответ

0 голосов
/ 08 мая 2020

Лучше всего использовать setState или что-то подобное в зависимости от вашего управления состоянием. localStorage не запускает повторную визуализацию. React так не спроектирован.

...