React中img的onError事件替换默认头像失效如何解决

通过Steam API获取用户Steam信息时，部分用户返回的头像资源无法正常加载：Steam平台中部分内容对应的头像资源缺失时会返回空图片，异常表现如下：

为解决该问题，最初尝试编写onError事件处理函数，计划在图片加载失败时自动替换为本地存储的默认头像，但实际运行时页面出现严重闪烁异常，头像始终无法正常设置为默认值，且会持续重复触发图片更新逻辑。
已通过直接给img标签设置src={defaultpfp}的方式验证，默认头像资源本身可以正常加载。

import defaultpfp  from "../img/defaultpfp.PNG";
// ...

function FixImg(e) {
    console.log("Found broken image: fixing")
    e.preventDefault();
    e.currentTarget.src = {defaultpfp}
    e.currentTarget.onerror = '';
}

// ...

{users.map((user) => (
    <tr key={user.pos}>
        <th>{user.pos}</th>
        <th>
            <img 
                alt="steampfp" 
                className="steam-pfp" 
                height={64} 
                width={64} 
                onError={(e) => FixImg(e)} 
                onClick={(e) => Redirect(e, user.url)} 
                src={user.pfp} 
            /> 
            {user.name}
        </th>
        <th>{user.ragequits}</th>
    </tr>
))}

• 核心逻辑错误：FixImg函数中给src赋值的写法有误，e.currentTarget.src = {defaultpfp}是将src设置为了一个包含defaultpfp属性的普通对象，而非导入得到的图片地址字符串。浏览器解析该对象时会将其转为[object Object]这类无效资源路径，会再次触发图片加载失败，最终形成「加载失败→触发onError→设置无效src→再次加载失败」的死循环，这就是页面闪烁、逻辑重复触发的根本原因。
• 冗余无效代码：img元素的error事件没有可取消的默认行为，e.preventDefault()这行代码不会产生任何实际作用；将onerror赋值为空字符串的写法在React渲染机制下不够稳妥，组件重渲染时可能导致事件监听重新生效。

修正FixImg函数的赋值逻辑，优化错误监听移除逻辑即可：

function FixImg(e) {
    console.log("Found broken image: fixing")
    // 先移除错误监听，避免替换src过程中重复触发
    e.currentTarget.onerror = null;
    // 直接赋值导入的默认头像地址字符串，不要包裹多余的对象花括号
    e.currentTarget.src = defaultpfp;
}

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