es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Componente funcional de React – El estado cambia, el componente se vuelve a renderizar pero el DOM no se actualiza.

Componente funcional de React – El estado cambia, el componente se vuelve a renderizar pero el DOM no se actualiza.

06 Jun, 2023 Programación

Me estoy enfrentando a un problema extraño con los componentes funcionales de React.

Contexto

Tengo un componente padre con dos objetos de estado. En el hook useEffect, realizo una llamada a la API y establezco el estado con los datos de respuesta recibidos, y luego proceso estos datos en bruto con algunos atributos y los establezco en el segundo estado.

Y en el evento click de un elemento input, vuelvo a procesar los datos en bruto (con otro conjunto de atributos) que guardé en el primer estado y luego establezco estos datos procesados en el segundo objeto de estado.

Por lo tanto, todo está funcionando como se espera. El objeto de estado se actualiza en la representación inicial y en el evento click, este estado se actualiza y el componente se vuelve a representar.

Pero el problema está con el DOM, el DOM no refleja este cambio de estado. Me pregunto cuál podría ser la razón. Agregaré un poco de seudocódigo para emular el mismo escenario.

Función ParentComponent = () => {
const [rawData, setRawData] = useSate({});
const [data, setData] = useState({});

const handleClick = ({ attr: “new attr” }) => {
const getProcessedData = processData(rawData, { attr });
setData(getProcessedData);
};

useEffect(() => {
const fetchData = async () => {
const res = await fetch(“apiurl”);
setRawData(res);
const getProcessedData = processData(res, { attr: “process based on this attr” });
setData(getProcessedData);
};
fetchData();
}, []);

return (


{/* Aquí el componente hijo recibe los datos actualizados en el evento click pero no se está reflejando en el DOM. */}


);
};

Cualquier ayuda sería apreciada. Gracias de antemano.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    Basándonos en el código proporcionado, parece que el problema no está en el componente funcional React en sí, sino en el componente hijo que recibe los datos actualizados del componente padre. Es posible que el componente hijo no se esté volviendo a renderizar aunque reciba las props actualizadas.

    Para solucionar este problema, puedes intentar añadir React.memo al componente hijo. Esto asegurará que el componente hijo solo se vuelva a renderizar cuando sus props hayan cambiado.

    Aquí tienes un fragmento de código actualizado con React.memo añadido al componente hijo:

    const Child = React.memo(({ data }) => {
  return (
    <div>{JSON.stringify(data)}</div>
  );
});

function ParentComponent() {
  const [rawData, setRawData] = useState({});
  const [data, setData] = useState({});

  const handleClick = ({ attr: 'new attr' }) => {
    const getProcessedData = processData(rawData, { attr });
    setData(getProcessedData);
  };

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('apiurl');
      setRawData(res);
      const getProcessedData = processData(res, { attr: 'process based on this attr' });
      setData(getProcessedData);
    };
    fetchData();
  }, []);

  return (
    <container>
      <button onclick="{()" ==""> handleClick({ attr: 'new attr' })}>Haz clic aquí</button>
      <child data="{data}"></child>
    </container>
  );
}

    Añadiendo React.memo al componente hijo, debería renderizarse de nuevo cuando sus props (en este caso, el objeto data) hayan cambiado. Esto debería reflejar el cambio de estado en el DOM.

Comments are closed.