Tengo un problema en el que mi componente se vuelve a renderizar con éxito, pero el estado no cambia dentro de los componentes secundarios que reciben la fecha interpolada dentro de una cadena.
Ejemplo:
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> ); };Caja de código:
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> ); }; Como puede ver, he intentado pasar el código dentro de un accesorio src en lugar de children pero el error persiste.
Lo "resolví" usando redux y actualizando la acción:
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, };Y luego actualizando la condición del hilandero de carga así:
if (!currentWorkspace || workspaceState.status === Status.change || !workspaceId) { return <LoadingSpinner />; } Lo que obliga a volver a renderizar todo el componente cada vez que cambio el espacio de trabajo. (El estado change , por lo que devuelve la rueda de carga durante una fracción de milisegundo y luego vuelve a representar el componente con los valores correctos)