小编gwr*_*k09的帖子

我正在努力解决我的 React 应用程序的性能问题。例如，我有一个卡片列表，您可以添加像 Facebook 一样的卡片。一旦其中一个子项更新，所有列表都会重新渲染，所以在这里我尝试使用 useMemo 或 React.memo。我以为我可以使用 React.memo 作为卡片组件，但没有成功。不确定我是否遗漏了一些重要的部分..

父.js

const Parent = () => {
 const postLike= usePostLike()
 const listData = useRecoilValue(getCardList)
 // listData looks like this -> 
 //[{ id:1, name: "Rose", avararImg: "url", image: "url", bodyText: "text", liked: false, likedNum: 1, ...etc }, 
 // { id:2, name: "Helena", avararImg: "url", image: "url", bodyText: "text", liked: false, likedNum: 1, ...etc },
 // { id: 3, name: "Gutsy", avararImg: "url", image: "url", bodyText: "text", liked: false, likedNum: 1, ...etc …

您好，我正在尝试使用原始后备图像更改 Material UI Avatar 的后备图像。有谁知道如何做到这一点？

const fallbackImage = "../../fallback/img.png"
const AvatarWithBadge = (image) => {
  const url = image ? image : fallbackImage;
  return (
 <Badge
      overlap="circle"
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'right',
      }}
      badgeContent={
        <NavigationIcon />
      }
    >
      <Avatar
        src={url}
        className={classes.avatar}
        imgProps={{
            onError:(e) => { e.target.src = ${fallbackImg}`}
        }}
      />
   </Badge>
}

我在这里想做的是监听错误并替换为我自己文件中的图像。我想知道当图像链接断开时如何收听。