为什么设置后状态仍然为空？答案

【问题标题】：Why is the state still null even after setting it?为什么设置后状态仍然为空？
【发布时间】：2020-01-22 09:00:26
【问题描述】：

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

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

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;

【问题讨论】：

我不太了解反应。但是setLayer() 是异步函数吗？它是在props 对象上设置图层吗？
我相信它是异步的。我正在将此示例改编为我的github.com/Esri/react-arcgis
为什么要在函数中加载模块？
我正在改编 BermudaTriangle 示例。
props.map.layers.add(layer); 不会对 props 做任何事情，而且你不应该改变 props，所以这是一件好事。也许只是做 setLayer 并在 layer 上做一个 useMemo 以在 layer 不为 null 时设置新的道具。

标签： reactjs esri

【解决方案1】：

是的，就像 cmets 建议的那样是异步的。好消息是，您尝试同步访问它的位置与您可以访问原始对象的位置相同，因此您可以直接使用它：

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;

【讨论】：

再次查看示例，这正是他们所做的。抱歉，React 对我来说还是个新手。