Question

这个想法是，我选择一个图像，然后将其上传到mongodb，并且在按下上传按钮的同时，我想触发页面的重新渲染，以便用最新的图像来更新头像。为此，我首先向服务器发送一个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中触发重新加载。

如何触发反应的重新呈现？

0 个答案: