Cómo sincronizar accesorios con el estado usando ganchos React: setState()

Este equipo de trabajo ha pasado mucho tiempo buscando para darle resolución a tu duda, te dejamos la soluciones y nuestro deseo es resultarte de gran ayuda.

Solución:

useState El argumento de la función de ganchos se usa solo una vez y no cada vez que cambia la propiedad. Debes hacer uso de useEffect ganchos para implementar lo que llamarías el componentWillReceiveProps/getDerivedStateFromProps funcionalidad

import React,useState , useEffect from 'react';

const Persons = (props) =>  
   const [nameState , setNameState] = useState(props)

   useEffect(() => 
       setNameState(props);
   , [props])

   return (
            

                
My name is props.name and my age is props.age

	
	
	

	
	
	
                
My profession is props.profession





            
        )



export default Persons;

los props valor en useState(props) se usa solo durante el renderizado inicial, las actualizaciones de estado adicionales se realizan con el setter setNameState.

Además, no hay necesidad de useEffect al actualizar el estado derivado:

const Person = props => 
  const [nameState, setNameState] = useState(props.name);
  // update derived state conditionally without useEffect
  if (props.name !== nameState) setNameState(props.name);
  // ... other render code
;

De los documentos de React:

[…] puede actualizar el estado Correcto durante el renderizado. reaccionará repetición el componente con estado actualizado inmediatamente después de salir del primer render por lo que no sería caro.

[…] una actualización durante el renderizado es exactamente lo que getDerivedStateFromProps Siempre ha sido así conceptualmente.

En esencia, podemos optimizar el rendimiento eliminando una fase adicional de repintado del navegador, como useEffect siempre se ejecuta después de que el renderizado se confirma en la pantalla.

ejemplo de trabajo

Este es un ejemplo artificial que ilustra el patrón anterior: en código real, leería props.name directamente. Consulte la publicación de blog de React para conocer casos de uso de estado derivado más apropiados.

const Person = props => 
  const [nameState, setNameState] = React.useState(props.name);
  // Here, we update derived state without useEffect
  if (props.name !== nameState) setNameState(props.name);

  return (
    

      
Person
      
nameState (from derived state)
      
props.name (from props)
      
Note: Derived state is synchronized/contains same value as props.name
    
  );
;

const App = () => 
  const [personName, setPersonName] = React.useState("Lui");
  const changeName = () => setPersonName(personName === "Lukas" ? "Lui" : "Lukas");

  return (
    

      
      Change props
    
  );
;

ReactDOM.render(, document.getElementById("root"));

Esta idea general se puede poner en gancho:

export function useStateFromProp(initialValue) 
  const [value, setValue] = useState(initialValue);

  useEffect(() => setValue(initialValue), [initialValue]);

  return [value, setValue];



function MyComponent( value: initialValue ) 
  const [value, setValue] = useStateFromProp(initialValue);

  return (...);

---

---

Utiliza Nuestro Buscador