Configuré mi nuevo valor marinaList. Puedo acceder al estado de marinaList en la función GetMarinaList. Pero cuando intento acceder al estado de marinaList en la función GetCounterConnectionDevices, obtengo el valor inicial de marinaList. ¿Por qué no puedo acceder a mi valor actual de mi estado en otra función?
import React, { useState, useCallback, useEffect } from "react"; function CounterConnectionDeviceDefinition(props) { const [marinaList, setMarinaList] = useState([]); useEffect(() => { GetMarinaList(); }, []) const GetMarinaList = () => { const RETRIEVED_MARINAS = [ { "Oid": 3348000013080006, "Status": 1, "LastUpdated": 1615185446387, "OperationRefNo": 1459738, "MarinaCode": 1, "MarinaName": "MERSİN MARİNA", "MarinaLocation": "MERSİN", "IsActive": true }, ] setMarinaList(RETRIEVED_MARINAS) console.log(" RETRIEVED_MARINAS", RETRIEVED_MARINAS); //I get retrieved marina data GetCounterConnectionDevices(-1); } const GetCounterConnectionDevices = () => { const RETRIEVED_COUNTER_CONNECTION_DEVICES = [ { "Oid": 3348000013898110, "Status": 1, "LastUpdated": 1618484345355, "OperationRefNo": 1498555, "PedestalControlCenterOid": 3348000013898011, "CounterParameterType": { "Oid": 0, "Status": 0, "LastUpdated": 0, "OperationRefNo": 0, "ParameterTypeOid": 0, "ParameterName": null, "ParameterCode": "001", "ParameterExplanation": null }, "CounterConnectionDeviceModelName": "LUNA_BC62_ANTALYA", "CounterConnectionDeviceId": "6-0-64-228-24-0-0-0", "CounterConnectionDevicePassword": null, "CounterConnectionDeviceIpAddress": null, "CounterConnectionDevicePortNumber": null, "IsActive": true }, ] console.log("🚀 => status.then => RETRIEVED_COUNTER_CONNECTION_DEVICES", RETRIEVED_COUNTER_CONNECTION_DEVICES, marinaList); // I get Retrieved Counter Array and []. } return ( <div> </div> ) } export default CounterConnectionDeviceDefinitionPorque react actualiza los estados asíncronos.
Esto significa que right after llamar a setMarinaList(RETRIEVED_MARINAS) el estado aún no ha cambiado. La lista sigue vacía.
Por eso tienes useEffect .
Si necesita ejecutar una función cuando cambia el estado, ese es su amigo. Puedes cambiar tu código a algo como esto
useEffect(() => { const RETRIEVED_COUNTER_CONNECTION_DEVICES = [ { "Oid": 3348000013898110, "Status": 1, "LastUpdated": 1618484345355, "OperationRefNo": 1498555, "PedestalControlCenterOid": 3348000013898011, "CounterParameterType": { "Oid": 0, "Status": 0, "LastUpdated": 0, "OperationRefNo": 0, "ParameterTypeOid": 0, "ParameterName": null, "ParameterCode": "001", "ParameterExplanation": null }, "CounterConnectionDeviceModelName": "LUNA_BC62_ANTALYA", "CounterConnectionDeviceId": "6-0-64-228-24-0-0-0", "CounterConnectionDevicePassword": null, "CounterConnectionDeviceIpAddress": null, "CounterConnectionDevicePortNumber": null, "IsActive": true }, ] console.log("🚀 => status.then => RETRIEVED_COUNTER_CONNECTION_DEVICES", RETRIEVED_COUNTER_CONNECTION_DEVICES, marinaList); // I get Retrieved Counter Array and []. }, [marinaList]) Y puede eliminar GetCounterConnectionDevices(-1); llama ahora.
Nota: su useEffect también se llamará una vez, cuando los componentes se monten, por lo que lo más probable es que necesite verificar si hay una matriz vacía.
Porque cada vez que usa su enlace en un componente diferente, está creando una nueva instancia con un estado separado. Si desea compartir su estado en este enlace en varios componentes, use ContextAPI en el enlace personalizado