如果插入到字符串中，则 React 状态更新不会反映在子组件中

Question

I've got a problem where my component re-renders successfully but the state doesn't change inside the child components that receives the date interpolated inside a string

Example:

export const IntegrationPage = () => {

  const currentWorkspace = useSelector(getCurrentWorkspace);
  const workspaceState = useSelector(getWorkspaceState);

  const [workspaceId, setWorkspaceId] = useState(currentWorkspace?.identifier);

  useEffect(() => {
    setWorkspaceId(currentWorkspace?.identifier);
//if I console.log workspaceId here, it updates correctly as well.
  }, [currentWorkspace]);

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

CodeBox:

type CodeBoxProps = {
  children?: ReactNode;
  src?: string;
};

export const CodeBox: FunctionComponent<CodeBoxProps> = ({ children, src }) => {
  const dispatch = useDispatch();
  const handleCopy = () => {
    const text = src?.toString() ?? children?.toString();
    navigator.clipboard.writeText(text ? text : "");
    dispatch(showNotification("Code was copied to clipboard", "success", "clipboard", 2250));
  };

  return (
    <div className={styles.codeBox} onClick={handleCopy}>
      <code className={styles.code}>{src ?? children}</code>
    </div>
  );
};

As you can see, I've tried passing the code inside a src prop instead of children but the error persists.

Answer 1

I "solved" it using redux and updating the action:

export const changeWorkspace = (workspaceId: number) => async (dispatch: any) => {
  await dispatch({
    type: WORKSPACE_CHANGE,
    workspaceId,
  });

  return dispatch({
    type: WORKSPACE_SET,
    workspaceId,
  });

  localStorage.setItem("selected-workspace", workspaceId);
};

//reducer:
   case WORKSPACE_CHANGE:
      return {
        ...state,
        status: Status.change,
        currentWorkspace: state.workspaces.find((workspace) => workspace.id === action.workspaceId),
      };

    case WORKSPACE_SET:
      return {
        ...state,
        status: Status.success,
      };

And then updating the loading spinner condition like so:

  if (!currentWorkspace || workspaceState.status === Status.change || !workspaceId) {
    return <LoadingSpinner />;
  }

Which forces to re-render the whole component each time I change the workspace. (Status becomes change so it returns the loading spinner for a split millisecond and then renders the component again with the correct values)