为什么无法从 react.js 挂钩中的另一个函数访问我的新状态值？

Question

我设置了我的 marinaList 新值。我可以在 GetMarinaList 函数中访问 marinaList 状态。但是当我尝试在 GetCounterConnectionDevices 函数中访问 marinaList 状态时，我得到了 marinaList 的初始值。为什么我无法在另一个函数中访问我的当前状态值？

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 CounterConnectionDeviceDefinition

Answer 1

因为每次您在不同的组件中使用挂钩时，您都在创建具有分离状态的新实例。如果您想在多个组件之间共享此挂钩中的状态，请在自定义挂钩

中使用 ContextAPI

Answer 2

因为react更新状态异步。

这意味着right after调用setMarinaList(RETRIEVED_MARINAS)状态还没有改变。该列表仍然是空的。

这就是为什么你 useEffect。

如果您需要运行状态更改时的功能，那是您的朋友。你可以把你的代码改成这样

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])

您现在可以删除 GetCounterConnectionDevices(-1); 通话。

注意：您的 useEffect 也将在安装组件时被调用一次，因此很可能您需要检查一个空数组。

为什么无法从 react.js 挂钩中的另一个函数访问我的新状态值？

Why can't access my new state value from another function in react.js hook?

javascript

state-management

reactjs

react-hooks