reactjs - Apollo 客户端反应变量更新未触发重新渲染

Question

我正在尝试通过单击来切换此组件中显示的图像。我正在使用 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在浏览器中。

标签： reactjsgraphqlapollo-clientconditional-renderingreactive-variable