Me resulta difícil entender un punto: setState en ParentComponent activa la reproducción de ChildComponent como se esperaba, eso está bien. ¡Pero setState en el componente MyProvider no lo activa! ¿Por qué eso? No hay ninguna memorización. Puede probar esta historia y asegurarse de que solo haya 2 mensajes de procesamiento: inicial y después de 6 segundos.
import React, { useEffect, useState } from "react"; const Context = React.createContext<number>(123); const MyProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [, setProviderState] = useState(0); useEffect(() => { setTimeout(() => setProviderState(123), 2000); }, []); return <Context.Provider value={123}>{children}</Context.Provider>; }; export const ParentComponent: React.FC = () => { const [, setParentState] = useState(0); useEffect(() => { setTimeout(() => setParentState(123), 6000); }, []); return ( <MyProvider> <ChildComponent /> </MyProvider> ); }; const ChildComponent: React.FC = () => { console.log("render!"); return <div>rest tree</div>; }; export default { title: "Test" };Desde aquí :
Todos los consumidores que son descendientes de un proveedor se volverán a renderizar cada vez que cambie la propuesta de valor del proveedor.
Para activar la nueva representación del proveedor, asegúrese de cambiar su propiedad de valor para que sea el valor de estado (no el valor codificado 123) de la siguiente manera:
const MyProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [providerState, setProviderState] = useState(0); useEffect(() => { setTimeout(() => setProviderState(123), 2000); }, []); return <Context.Provider value={providerState}>{children}</Context.Provider>; }; Tenga en cuenta que el valor de value , en <Context.Provider> cambia de ser el valor codificado de forma rígida de 123 al valor al que apunta ProviderState.
useEffect(() => { setTimeout(() => setParentState(123), 6000); }, [setProviderState]);Ponga su estado establecido dentro de [] como se muestra en el código anterior. Cada vez que cambie su estado establecido, se volverá a renderizar.