React JS中如何上传保存图片到本地存储？上传后需刷新才显示问题

问题出在你上传图片后，只把图片数据存到了localStorage，但没有同步更新组件的url状态。React组件只有在状态或props变化时才会重新渲染，所以没刷新页面的话，图片不会自动显示。

直接修改uploader函数，在存完localStorage后立即更新状态：

const App = () => {
    const [url, setUrl] = useState('');
    
    const uploader = (file) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => {
            const imageData = reader.result;
            localStorage.setItem('recent-image', imageData);
            // 这里直接更新状态，触发组件重新渲染
            setUrl(imageData);
        })
        reader.readAsDataURL(file);
    }

    useEffect(() => {
        // 组件挂载时从localStorage读取初始值
        setUrl(localStorage.getItem('recent-image'));
    }, [])

    return ( 
        <div>
            {/* 补上文件选择输入框，用来触发上传 */}
            <input 
                type="file" 
                accept="image/*"
                onChange={(e) => uploader(e.target.files[0])}
            />
            {url && <img src={url} alt="上传的图片" />}
        </div>
     );
}

关键修改点： #

• 在load回调里，拿到图片的base64数据后，除了存到localStorage，还调用setUrl更新状态，这样组件会立即重新渲染，图片就能实时显示。
• 补上了文件选择的input元素，否则没法触发上传操作。
• 给img加了url &&的判断，避免初始状态为空时显示无效的图片标签。

内容的提问来源于stack exchange，提问作者khatia