檔案成功上傳到后端后，如何重繪頁面？

我有一個個人資料編輯螢屏，允許用戶使用 React 作為我的前端更新個人資料圖片和個人資料橫幅圖片。成功上傳用戶圖片后，客戶端會根據按下的按鈕收到“個人資料圖片上傳成功”或“橫幅圖片上傳成功”的訊息。然而，一旦影像被上傳，用戶當前需要點擊重繪 瀏覽器按鈕才能看到更新的影像。我怎樣才能使上傳完成并且用戶收到回應訊息后，瀏覽器會自動重繪 ，以便用戶無需單擊重繪 按鈕？任何幫助將不勝感激，謝謝！

EditProfile.jsx：

import '../../components/pages/styles/EditProfile.css';
import {useEffect, useState} from 'react';
import {useSelector} from 'react-redux';
import UserProfileService from '../../services/user-profile.service';
import {upload} from '../../services/upload.service';
import {FileUploader} from '../../components/FileUploader';
import axios from 'axios';
import authHeader from '../../services/auth-header';
const API_URL = 'http://localhost:8080/api';

const EditProfile = () => {
    const {user: currentUser} = useSelector((state) => state.auth);
    const [file, setFile] = useState();
    const [description, setDescription] = useState('');
    const [loading, setLoading] = useState(false);
    const [content, setContent] = useState('');
    const [photoURL, setPhotoURL] = useState('/images/user-solid.jpeg');
    const [bannerURL, setBannerURL] = useState('/images/default-header.png');
    const [data, setData] = useState();
    const [preview, setPreview] = useState(null);

    useEffect(() => {
        UserProfileService.getProfile().then(
            (response) => {
                if (response.data.profile_img)
                    setPhotoURL(response.data.profile_img_complete);
                if (response.data.profile_banner)
                    setBannerURL(response.data.profile_banner_complete);
            },
            (error) => {
                const _content =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString();
                setContent(_content);
            }
        );
    }, []);

    const onAddImage = (file) => {
        window.URL.revokeObjectURL(preview);
        if (!file) return;
        setPreview(window.URL.createObjectURL(file));
        setFile(file);
    };

    const profileImageSubmit = async (event) => {
        event.preventDefault();

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

        const result = await axios
            .post(API_URL   '/profile-image/upload', formData, {
                headers: {...authHeader(), 'Content-Type': 'multipart/form-data'},
            })
            .then((res) => setData(res.data));
    };

    const profileBannerSubmit = async (event) => {
        event.preventDefault();

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

        const result = await axios
            .post(API_URL   '/banner/upload', formData, {
                headers: {...authHeader(), 'Content-Type': 'multipart/form-data'},
            })
            .then((res) => setData(res.data));
    };

    return (
        <div className='page'>
            <div className='profile-container'>
                <div className='profile-card'>
                    <header className='profile-name-header'>
                        <h3>
                            <strong id='profile-name'>{currentUser.username} Profile</strong>
                        </h3>
                    </header>
                    <img src={photoURL} alt='Avatar' className='avatar'></img>
                    <img src={bannerURL} alt='Banner' className='banner'></img>
                    <div className='profile-form-container'>
                        <p id='profile-form-label'>Update your Profile Picture</p>
                        <form
                            onSubmit={profileImageSubmit}
                            className='upload-form'
                        >
                            <input
                                filename={file}
                                onChange={(e) => onAddImage(e.target.files[0])}
                                type='file'
                                accept='image/*'
                                className='profile-image-selector'
                                id='image-selection-btn'
                            ></input>
                            <button type='submit' id='data-upload-btn'>
                                Submit
                            </button>
                        </form>
                        <p id='profile-form-label'>Update your Profile Banner</p>
                        <form
                            onSubmit={profileBannerSubmit}
                            className='upload-form'
                        >
                            <input
                                filename={file}
                                onChange={(e) => onAddImage(e.target.files[0])}
                                type='file'
                                accept='image/*'
                                className='profile-image-selector'
                                id='image-selection-btn'
                            ></input>
                            <button type='submit' id='data-upload-btn'>
                                Submit
                            </button>
                        </form>
                    </div>
                    {data && (
                        <div className='post-message'>
                            <div
                                className={data ? 'alert post-success' : 'alert post-danger'}
                                role='alert'
                            >
                                {data.message}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default EditProfile;

uj5u.com熱心網友回復：

您可以使用 JavaScript location.reload

window.location.reload(false);

您還可以使用 setTimeout 在幾秒鐘后重新加載，如下所示：

    const profileBannerSubmit = async (event) => {
    event.preventDefault();

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

    const result = await axios
        .post(API_URL   '/banner/upload', formData, {
            headers: {...authHeader(), 'Content-Type': 'multipart/form-data'},
        })
        .then((res) => setData(res.data))
        .then((res) => { setTimeout(() => {
                            window.location.reload(false);
                        }, 2000)

             })
     };

此外，即使不需要重新加載頁面，您也可以簡單地呼叫getProfile()內部函式profileBannerSubmit()，profileImageSubmit()這會將呼叫發送到 api 以獲取用戶的最新詳細資訊。

標籤：javascript 反应 反应钩子

上一篇：如何從`react-intl-tel-input-v2`禁用`ReactIntl??TelInput`組件？

下一篇：我想根據問題串列顯示動態功能按鈕。任何建議都會很棒