為什么無法從react.js掛鉤中的另一個函式訪問我的新狀態值？

我設定了我的 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

uj5u.com熱心網友回復：

因為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當組件安裝時，您也將被呼叫一次，因此很可能您需要檢查一個空陣列。

uj5u.com熱心網友回復：

因為每次你在不同的組件中使用你的鉤子時，你都在創建具有分離狀態的新實體。如果您想在此掛鉤中跨多個組件共享您的狀態，請在自定義掛鉤中使用ContextAPI

標籤：javascript 反应 钩 状态管理

上一篇：為什么我從包含資料的字串中得到未定義？

下一篇：如何在js中選擇具有相同類名的按鈕的單擊按鈕表單串列？