Estoy construyendo una forma dinámica y, a partir de ahora, mi jerarquía de componentes es la siguiente:
App Caseform DynamicFormBuilder Context.Provider Patients Patient key = "patient_1" ComponentCreator key = "patient_1_1" Textbox ComponentCreator key = "patient_1_2" Textbox ComponentCreator key = "patient_1_3" Textbox Patient key = "patient_2" ComponentCreator key = "patient_2_1" Textbox ComponentCreator key = "patient_2_2" Textbox ComponentCreator key = "patient_2_3" TextboxA partir de ahora, tengo datos JSON codificados en formato de caso, pero eventualmente, vendrán de la llamada de búsqueda. Tan pronto como DynamicFormBuilder recibe los metadatos del formulario de caso, crea estados a partir de ellos.
Mantengo el estado a nivel de caso incluso para su hijo. Pensé en hacerlo de esa manera porque el requisito era admitir el guardado de parches (enviar solo datos modificados al backend al presionar el botón Guardar). Si alguien sabe de una mejor manera de hacer esto, por favor hágamelo saber.
Estoy pasando una función usando la API de contexto a los componentes secundarios para que puedan actualizar el estado en DynamicFormBuiler.
El problema al que me enfrento es que, digamos, incluso si el usuario edita un cuadro de texto, se procesa todo el formulario dinámico.
Revisé muchas respuestas en StackOverflow que aconsejan usar el método de ciclo de vida shouldComponentUpdate, pero no puedo averiguar cómo lo usaré aquí.
Estoy agregando un enlace a la caja de arena y en la consola, puede ver que si un usuario edita un campo, todas las cosas se representan nuevamente.
Comportamiento esperado: - Lo que estoy buscando es, por ejemplo: - si el usuario editó solo un cuadro de texto, diga en el paciente 1, entonces solo ese cuadro de texto se vuelve a representar
Esta es la primera vez que uso reaccionar. Me disculpo de antemano si alguien siente que no he investigado lo suficiente, he leído muchas preguntas pero todavía me enfrento a algunos desafíos, cualquier ayuda será muy apreciada.
Si envuelves cada componente en el HOC de React.memo(), esto debería evitar repeticiones excesivas.
https://reactjs.org/docs/react-api.html#reactmemo
-Editar-
Sí, también funciona con componentes de clase.
p.ej
const MyComponent = React.memo(class extends React.Component { render () { return <h1>TEST</h1> } });