我正在尝试通过单击来切换此组件中显示的图像。我正在使用 Apollo Client 的反应变量,如仅限本地字段中所示,并遵循此博客文章中的更新反应变量部分。
const Portrait = (props: PortraitProps): JSX.Element => {
const { index, profile } = props;
const { handleCardClick } = useGameEvent(boardStatusVar);
const status = useReactiveVar(boardStatusVar);
return (
<StyledPortrait
src={status[index].isHidden ? spinnerSVG : profile.pokemon.image}
alt={""}
onClick={() => { handleCardClick(index, status[index].isHidden); }}
/>
);
};
在调用回调之前和之后记录status[index].isHidden
显示反应变量值已正确更改,但组件未重新渲染。
额外信息:不确定它是否可能是问题的一部分,但对于上下文,StyledPortrait
它是一个 img 标签样式的组件,status[index].isHidden
初始值是true
并且它正确显示spinnerSVG
在浏览器中。