FileReader读取图片后为什么无法在React中立即更新状态?

Code°晨曦 阅读 3

我在用React做图片上传预览功能,用FileReader读取文件后调用setState,但页面没反应。console.log能打出结果,但组件不重新渲染,是不是哪里写错了?

我试过把reader.onload写成箭头函数,也试过useCallback包住处理函数,还是不行。

const handleFileChange = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = () => {
    setPreviewUrl(reader.result); // 这里设了状态,但UI没更新
  };
  reader.readAsDataURL(file);
};
我来解答 赞 4 收藏
二维码
手机扫码查看
1 条解答
A. 园园
A. 园园 Lv1
异步问题,把reader.result存到变量再setState就行了:

reader.onload = () => {
const result = reader.result;
setPreviewUrl(result);
};


React有时会搞丢闭包里的引用,直接存下来最稳。
点赞
2026-03-07 17:25