状态未在函数中更新（钩子）

Question

我正在学习React一个星期，并决定创建一个博客进行练习。我正在使用React钩子和Redux Toolkit。

我要上传文件（图像）。有一个变量imageUrl：

const [imageUrl, setImageUrl] = useState("");

有输入：

<input type="file" id="file" accept="image/jpeg, image/png" onChange={(e) => handleImageChange(e)}></input>

有一个功能handleImageChange：

const handleImageChange = e => {
        e.preventDefault();

        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () => setImageUrl(reader.result);

        if (file) reader.readAsDataURL(file);
    }

问题在于setImageUrl不会立即更新imageUrl。它仅在第二次尝试时有效。但是，如果我在输入的事件onChange中编写此代码，则一切正常。

为什么会发生这种情况，我该如何解决？