Estos son mis estados usando ganchos:

const [adminProfile, setProfile] = useState({
        locations: [],
        });

    const [location, setLocation] = useState({

        locationName: "",
        location: {},
        locationPhone: "",
        locationEmail: "",
        staff: [],
        multipleKitchens: false,
        kitchens: [],
    });

    const [locationList, setLocationList] = useState([]);

    const [locationAddress, setAddress] = useState({
            streetAddress: "",
            streetAddress2: "",
            city: "",
            state: "",
            zip: "",
            country: "USA"
     });

Tengo un montón de campos con controladores onChange y un controlador onClick que necesita actualizar 3 estados en orden. Primero, LocationAddress debe convertirse en el estado de la propiedad de ubicación dentro del estado de ubicación. En segundo lugar, el estado de ubicación debe actualizarse con una ID única, y luego esa ID única se inserta en la matriz en el estado locationList. Finalmente, toda la matriz del estado locationList se agrega a la propiedad de ubicaciones del estado adminProfile. Estos son todos en un componente.

const handleClickLocation = () => {

        setLocation(prevValue => ({
            ...prevValue,
            locationID: uuidv4(),
            location: locationAddress
        }));

        setLocationList(prevValue => [...prevValue, location.locationID]);

        setProfile(prevValue => ({
            ...prevValue,
            locations: locationList
        }))

La primera vez que se activa el controlador de clics, establece solo el primer estado en el controlador y envía "indefinido" al segundo estado. Cuando se hace clic en el controlador de clics por segunda vez, se comporta normalmente. Quiero que todos los estados se actualicen simultáneamente. Intenté forceUpdate (), pero no pude entender la sintaxis. He intentado usar ReactDOM.unstable_batchedUpdates pero todavía se comportó igual.

¿Cómo puedo hacer que esto funcione? Quiero mantener esto dentro de un componente. ¿Es eso posible?

0
user1760020 23 jun. 2020 a las 06:47

2 respuestas

La actualización del estado es un comportamiento asincrónico, debido a que está obteniendo locationID indefinido para setLocationList. Dentro del componente de clase, podemos usar una devolución de llamada para establecer una llamada de estado como esta:

this.setState({ data: newData }, () => { console.log("This will get printed after setState") })

Pero en su caso, está utilizando el componente de función, por lo que debe usar useEffect react hook para escuchar los cambios en sus datos y luego actualizar otros datos en el estado.

Eche un vistazo a esta pregunta: Cómo usar la devolución de llamada `setState` al reaccionar ganchos

0
Sagar Darekar 23 jun. 2020 a las 04:06

SetState es asynchronous, significa que cuando se llama, su estado no se actualizará al mismo tiempo , lleva un tiempo realizar su acción.

Puede hacer uso de useEffect para hacer eso.

useEffect realizará una acción solo cuando el estado especificado (entre corchetes) cambie

useEffect(() => {
   setLocation({
       ...location,
       location: locationAddress,
       locationID: uuidv4()
   })
}, [locationAddress]) //When locationAddress changes, setLocation

useEffect(() => {
   setLocationList([
          ...locationList,
          location.locationID
       ])
}, [location]) //When location changes, insert Id 

Ps: puede tener múltiples efectos de uso en su código.

0
Gustavo Bordin 23 jun. 2020 a las 04:08