为什么无法从 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("
I set my marinaList new value. I can access marinaList state in GetMarinaList function. But when I try access marinaList state in GetCounterConnectionDevices function I get inital value of marinaList. Why I can't access my current value of my state in another function ?
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
因为
react更新状态是异步的。这意味着
在调用setMarinaList(RETRIEVED_MARINAS)之后，状态尚未更改。该列表仍然是空的。这就是为什么你有 useEffect。
如果你需要在状态改变时运行一个函数，那就是你的朋友。您可以将代码更改为类似这样的内容
Because
reactupdates states async.This means that
right aftercallingsetMarinaList(RETRIEVED_MARINAS)the state hasn't changed yet. The list is still empty.That's why you have useEffect.
If you need to run a function when the state changes that's your friend. You can change your code to something like this
And you can remove
GetCounterConnectionDevices(-1);call now.Note: your
useEffectwill also be called once, when the components mounts, so most likely you need to to a check for an empty array.因为每次您在不同的组件中使用钩子时，您都会创建具有分离状态的新实例。如果您想在多个组件之间共享此钩子中的状态，请在自定义钩子中使用 ContextAPI
Because everytime you are using your hook in different component youre creating new instance with separated state. If you want to share your state in this hook across multiple components, use ContextAPI in custom hook