Javascript 无法从回调访问react状态

我有以下组成部分：

const ParentComponent: React.FC = () => {
    // Somewhere in the code, I set this to some value
    const [newType, setNewType] = useState<any>(undefined);

    // Somewhere in the code, I set this to true
    const [enableAddEdge, setEnableAddEdge] = useState(false);

    const addEdge = (data: any) => {
        console.log("newType", newType); // This is undefined
    }

    return (
    ...
        <VisNetwork 
            newType={newType}
            onAddEdge={addEdge}
            enableAddEdge={enableAddEdge}
        />
    ...
    )
}
export default ParentComponent;

interface Props {
    newType: any;
    onAddEdge: (data: any) => void;
    enableAddEdge: boolean;
}
const VisNetwork: React.FC<Props> = (props: Props) => {
    const options: any = {
        // Some vis-network specific option configuration
        manipulation: {
            addEdge: (data: any, callback: any) => props.onAddEdge(data);
        }
    }
    ...
    // Some code to create the network and pass in the options
    const network = new vis.Network(container, networkData, options);

    useEffect(() => {
        if (props.enableAddEdge) {
            // This confirms that indeed newType has value
            console.log("newType from addEdge", props.newType);

            // Call reference to network (I name it currentNetwork)
            // This will enable the adding of edge in the network.  
            // When the user is done adding the edge,
            // the `addEdge` method in the `options.manipulation` will be called.
            currentNetwork.addEdgeMode();
        }
    }, [props.enableAddEdge])

    useEffect(() => {
        if (props.newType) {
            // This is just to confirm that indeed I am setting the newType value
            console.log("newType from visNetwork", props.newType); // This has value
        }
    }, [props.newType]);
}
export default VisNetwork;

constparentcomponent:React.FC=（）=>{
//在代码的某个地方，我将其设置为某个值
const[newType，setNewType]=useState（未定义）；
//在代码的某个地方，我将其设置为true
const[enabledEdge，setenabledEdge]=useState（false）；
const addEdge=（数据：任意）=>{
console.log（“newType”，newType）；//这是未定义的
}
返回(
...
...
)
}
导出默认父组件；
界面道具{
新类型：任何；
onAddEdge：（数据：任意）=>无效；
enabledEdge：布尔值；
}
const VisNetwork:React.FC=（道具：道具）=>{
常量选项：任意={
//一些特定于网络的选项配置
操纵：{
addEdge：（数据：任意，回调：任意）=>props.onAddEdge（数据）；
}
}
...
//创建网络并传入选项的一些代码
const network=新的可视网络（容器、网络数据、选项）；
useffect（（）=>{
如果（道具启用边缘）{
//这证实了newType确实有价值
log（“addEdge中的newType”，props.newType）；
//调用对网络的引用（我将其命名为currentNetwork）
//这将允许在网络中添加边缘。
//当用户添加完边后，
//将调用“options.manipulation”中的“addEdge”方法。
currentNetwork.addEdgeMode（）；
}
}，[props.enabledEdge]）
useffect（（）=>{
if（props.newType）{
//这只是为了确认我确实在设置newType值
console.log（“来自visNetwork的newType”，props.newType）；//这有值
}
}，[props.newType]）；
}
导出默认网络；

调用

addEdge

方法时，

newType

状态变为未定义。我知道绑定，但我不知道是否可以使用它，以及如何在功能组件中使用它。请告知如何获取

newType

值

---

另外，从

VisNetwork

，我想从

options.manipulation.addEdge

内部访问

networkData

状态。我知道这是不可能的，但有解决办法吗？此时，我还需要访问

networkData

。

在此场景中，您需要

useRef

。它显示为

const network=new vis.network（容器、网络数据、选项）仅使用第一次渲染中的选项。或者类似的事情正在发生

这可能与
addEdge
函数中的
newType
有一个闭包有关。因此，它有陈旧的价值观：

为了解决这个问题，您需要
useRef
来存储
newType
的最新值。引用是可变的，因此它始终可以存储newType的当前值，而无需重新渲染

// Somewhere in the code, I set this to some value
const [newType, setNewType] = useState<any>(undefined);

const newTypeRef = useRef(newType);
useEffect(() => {
  // Ensure the ref is always at the latest value
  newTypeRef.current = newType;
}, [newType])

const addEdge = (data: any) => {
    console.log("newType", newTypeRef.current); // This is undefined
}

//在代码的某个地方，我将其设置为某个值
const[newType，setNewType]=useState（未定义）；
const newTypeRef=useRef（newType）；
useffect（（）=>{
//确保ref始终为最新值
newTypeRef.current=新类型；
}，[newType]）
const addEdge=（数据：任意）=>{
console.log（“newType”，newTypeRef.current）；//这是未定义的
}
在此场景中，您需要
useRef
。它显示为
const network=new vis.network（容器、网络数据、选项）仅使用第一次渲染中的选项。或者类似的事情正在发生

这可能与
addEdge
函数中的
newType
有一个闭包有关。因此，它有陈旧的价值观：

为了解决这个问题，您需要
useRef
来存储
newType
的最新值。引用是可变的，因此它始终可以存储newType的当前值，而无需重新渲染

// Somewhere in the code, I set this to some value
const [newType, setNewType] = useState<any>(undefined);

const newTypeRef = useRef(newType);
useEffect(() => {
  // Ensure the ref is always at the latest value
  newTypeRef.current = newType;
}, [newType])

const addEdge = (data: any) => {
    console.log("newType", newTypeRef.current); // This is undefined
}

//在代码的某个地方，我将其设置为某个值
const[newType，setNewType]=useState（未定义）；
const newTypeRef=useRef（newType）；
useffect（（）=>{
//确保ref始终为最新值
newTypeRef.current=新类型；
}，[newType]）
const addEdge=（数据：任意）=>{
console.log（“newType”，newTypeRef.current）；//这是未定义的
}
根据您在此处提供的代码，您将
newType
初始值设置为未定义，因此没有理由
console.log（“newType”，newType）
记录其他内容？初始化状态时是
undefined
，但最终我将其设置为一个值。我已经在
VisNetwork
组件上记录了该值。当子组件调用
onAddEdge
回调时，我在
newType
中设置的值将丢失。从这里提供的代码中，您将
newType
初始值设置为未定义，因此没有理由
console.log（“newType”，newType）
要记录其他内容吗？当我初始化状态时，它是
未定义的
，但最终我将其设置为一个值。我已经在
VisNetwork
组件上记录了该值。当子组件调用
onAddEdge
回调时，我在
newType
中设置的值将丢失。