反应承诺到useState Hook的终止

时间:2019-11-08 06:57:16

标签: javascript reactjs promise async-await

我正在使用上下文函数,并且在其他js文件上调用了该函数。但是setThreeImdf是useState函数。

上下文函数;

     const [threeImdf, setThreeImdf] = useState({});

     const createMap = (ref, width, height) => {
          const display_point = map.venue.features[0].properties.display_point.coordinates;
          const threeImdf = new ThreeImdf(
            ref,
            width,
            height,
            map,
            display_point
          );
          window.addEventListener("resize", () => {
            threeImdf.resize(window.innerWidth, window.innerHeight);
          });
          threeImdf.showLayer([0]);
          setThreeImdf(threeImdf);
        });
      };

Home.js useEffect函数

const { map, createMap, threeImdf } = useContext(MapContext);

    useEffect( async () => {
        if (!_.isEmpty(map)) {
          createMap(mapRef, window.innerWidth, window.innerHeight);
          const data = threeImdf.getGrouppedObjectsByLayer(currentFloor);
          const layers = threeImdf.getOrdinalsNumber();
          setFloorCount(layers);
          setCategories(data);
        }
      }, []);

但是我在useEffect中运行上下文函数,返回给我threeImdf找不到。我想等待setThreeImdf挂钩的结束。我该怎么办?

1 个答案:

答案 0 :(得分:0)

需要创建上下文

usedBudget

上下文可见,您需要将组件包装在以下位置:

const Context = React.createContext(MapContext);