为什么即使设置后状态仍然为空？

Question

我试图设置一个对象然后立即使用它，但它说它是空的。我可以在调试模式下观察到实例化对象不为空。

我可以只使用实例化对象而不是常量，但有人建议我不要这样做。

import { useState, useEffect } from "react";
import { loadModules } from "@esri/react-arcgis";

const TestLayer = props => {
  const [layer, setLayer] = useState(null);
  useEffect(() => {
    loadModules(["esri/layers/GraphicsLayer"])
      .then(([GraphicsLayer]) => {
        const graphicsLayer = new GraphicsLayer();
        setLayer(graphicsLayer);
        props.map.layers.add(layer); //layer is still null
      });
  }, []);

  return null;
};

export default TestLayer;

Answer 1

是的，正如评论所暗示的那样，它是异步的。好消息是，您尝试同步访问它的位置与您可以访问原始对象的位置相同，因此您可以直接使用它：

import { useState, useEffect } from "react";
import { loadModules } from "@esri/react-arcgis";

const TestLayer = props => {
  const [layer, setLayer] = useState(null);
  useEffect(() => {
    loadModules(["esri/layers/GraphicsLayer"]).then(([GraphicsLayer]) => {
      const graphicsLayer = new GraphicsLayer();
      setLayer(graphicsLayer);
      props.map.layers.add(graphicsLayer); // Don't need to access state here
    });
  }, []);

  return null;
};

export default TestLayer;

为什么即使设置后状态仍然为空？

Why is the state still null even after setting it?

reactjs

esri