React State更新后插值入字符串的内容在子组件中未同步生效问题

问题根因&解决方案 #

你遇到的情况属于React组件渲染缓存或状态同步类问题，按照下面的步骤排查即可解决：

第一步：先确认是渲染问题还是样式问题 #

打开浏览器开发者工具的元素面板，找到CodeBox渲染生成的<code>标签，切换workspaceId时查看标签内的实际文本是否同步更新：

• 如果DOM内的文本已经更新，但页面显示没变化：检查CodeBox关联的CSS样式，排查是否存在content属性写死固定值、文本负缩进移出可视区域、字体颜色和背景色一致这类样式错误。
• 如果DOM内的文本没有更新，继续往下排查。

第二步：强制CodeBox重渲染 #

90%的这类问题都是组件意外被缓存导致的，直接给CodeBox加上和workspaceId绑定的key属性，强制workspaceId变化时销毁重建组件即可：

// 传children的写法
<CodeBox key={workspaceId}>
  {`something here ${workspaceId} something else`}
</CodeBox>

// 传src的写法
<CodeBox key={workspaceId} src={`something here ${workspaceId} something else`} />

第三步：优化冗余状态避免同步异常 #

你当前代码里单独声明workspaceId state加useEffect同步的写法是冗余的，完全可以直接从currentWorkspace取值，避免多出来的状态同步环节出问题，改造后的代码如下：

export const IntegrationPage = () => {
  const currentWorkspace = useSelector(getCurrentWorkspace);
  const workspaceState = useSelector(getWorkspaceState);
  // 直接取值不需要单独存state
  const workspaceId = currentWorkspace?.identifier;

  if (!currentWorkspace || workspaceState.status === Status.requesting || !workspaceId) {
    return <LoadingSpinner />;
  }
  return (
    <div className={styles.IntegrationPage}>
      <div className={styles.content}>
        <div className={styles.left}>
          <Card leftHeader="Tracking overview" rightHeader={`ID: ${workspaceId}`}>
            <CardItem content="No visits in last 48 hours" header="No data" variant="item" />
          </Card>
          <CodeBox key={workspaceId}>
            {`something here ${workspaceId} something else`}
          </CodeBox>
        </div> 
      </div>
    </div>
  );
};

第四步：排查上层缓存逻辑 #

如果上面的方法都没用，检查IntegrationPage和CodeBox之间的所有父组件，是否有用React.memo、useMemo、shouldComponentUpdate这类逻辑跳过了重渲染，导致传递给CodeBox的props一直是旧值。

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