React从数据库加载图片后onClick事件失效问题求助

问题场景 #

开发带头像的用户资料页面时，首次运行正常，但用户重新进入页面后，点击头像无任何反应。预期效果是点击头像可移除当前图片，切换到上传组件以上传新图片，图片以base64字符串存储。

相关代码 #

预览图状态设置逻辑 #

const [image, setImage] = useState(null);
const [preview, setPreview] = useState(null);
useEffect(()=> {
    if(image){
        const reader = new FileReader();
        reader.onloadend = () => {
            setPreview(reader.result);
        }
        reader.readAsDataURL(image);
    }else{
        setPreview(null);
    }
}, [image]);

从数据库加载预览图逻辑 #

if(userData[11] != ''){
    setImage(null);
    setPreview(userData[11]);
}

组件渲染逻辑 #

{preview ? (
    <img class="image-preview" onClick={() => {setImage(null)}} src={preview} />
) : (
    <div class="image-upload">
        <label for="file-input">
            <img src="https://icons.iconarchive.com/icons/bokehlicia/captiva/128/multimedia-photo-manager-icon.png"/>
        </label>
        <input 
            accept="image/*" 
            onChange={(e) =>{
                const file = e.target.files[0];
                if(file && file.type.substring(0, 5) === "image"){
                    setImage(file);
                } else{
                    setImage(null);
                }
            }} 
            id="file-input" 
            type="file" 
        />
    </div>
)}

问题根源 #

当页面重新进入并从数据库加载base64格式的头像时，手动设置了setImage(null)和setPreview(userData[11])，此时image状态为null。点击头像执行setImage(null)时，image状态未发生变化（原本就是null），导致监听image的useEffect不会触发，preview依然保持数据库返回的base64值，页面无法切换到上传组件，表现为点击无反应。

修复方案 #

直接在头像的点击事件中重置preview状态，无需依赖image状态变化间接触发：

修改组件渲染部分的img标签点击事件：

{preview ? (
    <img class="image-preview" onClick={() => {
        setPreview(null);
        setImage(null); // 确保状态统一，避免后续逻辑异常
    }} src={preview} />
) : (
    // 上传组件代码保持不变
)}

点击头像时会直接清空preview状态，页面立即切换到上传组件，符合预期效果。

内容的提问来源于stack exchange，提问作者Uroš Milošević