Tengo el siguiente componente donde dentro de useEffect , estoy llamando a algunas funciones relacionadas con la lectura de datos que deben ocurrir una vez en la carga.
El problema es que algunos de los datos de utilería no están disponibles en esta etapa (aún sin definir) como prodData e index .
Solo están disponibles cuando entro en los componentes anidados como <NestedComponent1 /> .
Deseo mover esta lógica a los componentes anidados que resolverán este problema.
Pero no quiero repetir este código dentro de useEffect para cada componente. En lugar de buscar escribir estas 7 líneas una vez, tal vez en una función
y simplemente llámelo con los 3 componentes anidados.
El problema es que hay una función de orden superior que se envuelve aquí más todos los valores como prodData e index provienen de Redux store .
No puedo simplemente mover toda esta lógica dentro useEffect a una función JS normal y, en cambio, necesito un componente funcional para esto.
Y si hago un componente funcional para realizar estas operaciones, no puedo llamarlo en useEffect para cada uno de los componentes anidados.
Porque esta no es una sintaxis válida.
React.useEffect(() => { <NewlyCreatedComponentWithReadingFunctionality /> }, []);Por lo tanto, mi consulta es si hay alguna manera de que pueda escribir un componente funcional que tenga la lógica de lectura de datos dentro de su useEffect. ¿Y luego extender este componente funcional para cada uno de los componentes funcionales para que useEffect simplemente se active cuando se llame a cada uno de estos componentes anidados?
No parece ser posible hacer esto, por lo que busca alternativas.
Este es el componente existente donde algunos de estos valores prop no están definidos en esta etapa.
const MyComponent = ({ prodData, index, country, highOrder: { AHigherOrderComponent, }, }) => { // this is the logic which I am looking to write once and be // repeatable for all the NestedComponent{1,2,3}s below. React.useEffect(() => { const [, code] = country.split('-'); const sampleData = prodData[index].sampleData = sampleData; const period = prodData[index].period = period; const indication = prodData[index].indication = indication; AHigherOrderComponent(someReadDataFunction(code, sampleData)); AHigherOrderComponent(someReadDataFunction(code, period); AHigherOrderComponent(someReadDataFunction(code, indication); }, []); return ( {/* other logics not relevant */} <div> <div> <NestedComponent1 /> <NestedComponent2 /> <NestedComponent3 /> </div> </div> ); }; export default connect( // redux connect ({ country, prodData, index, }) => ({ country, prodData, index, }) )(withHighOrder(MyComponent));Los componentes de React implementan un patrón llamado composición. Hay algunas formas de compartir el estado entre partes de su aplicación React, pero siempre que tenga que recordar algún estado global y ofrecer alguna funcionalidad compartida, intentaría administrar esa lógica dentro de un proveedor de contexto .
Yo intentaría lo siguiente:
someReadDataFunction como una función de devolución de llamada como parte del contextofunctionHasBeenCalled que recuerda si ya se ha llamado someReadDataFunctionfunctionHasBeenCalled en verdadero dentro de someReadDataFunctionsomeReadDataFunction dentro de sus componentes dentro de un useEffect basado en los datos de accesorios De esta manera, su aplicación recuerda globalmente si la función ya se ejecutó, pero aún puede usar los datos más recientes dentro de su useEffect dentro de sus componentes para llamar a someReadDataFunction .