访问 Context 值时获取 undefined

Question

我在尝试从 component.Here 访问 values 时不断获取 undefined 是我的提供程序文件内容：

import React from "react";
import { FlyToInterpolator } from "react-map-gl";

export const MapContext = React.createContext();
export function MapProvider(props) {
  const [viewport, setViewport] = React.useState(INITIAL_STATE);

  const onLoad = () => {
    setViewport(DRC_MAP);
  };
  return (
    <MapContext.Provider
      value={{
        viewport,
        setViewport,
        onLoad
      }}
      {...props}
    />
  );
}

export const { Consumer: MapConsumer } = MapContext;

export const withMap = Component => props => {
  return (
    <MapConsumer>{value => <Component map={value} {...props} />}</MapConsumer>
  );
};

// this is what state gets initialised as
const INITIAL_STATE = {
  height: "100vh",
  width: "100%",
  longitude: 23.071374,
  latitude: -3.6116245,
  zoom: 1.33
};

const DRC_MAP = {
  longitude: 23.656,
  latitude: -2.88,
  zoom: 4,
  transitionDuration: 3000,
  transitionInterpolator: new FlyToInterpolator(),
  transitionEasing: t => t * (2 - t)
};

因此，当我尝试使用 viewport 或任何其他 values 定义时，我得到 undefined。这是我使用上述代码的地图组件。

import React, { useContext } from "react";
import ReactMapGL from "react-map-gl";
import { MapContext } from "./contexts/MapProvider";

const MAPBOX_TOKEN ="secret"
const mapStyle = "mapbox://styles/jlmbaka/cjvf1uy761fo41fp8ksoil15x";

export default function Map() {
  const { viewport, setViewport, onLoad } = useContext(MapContext);

  return (
    <ReactMapGL
      mapboxApiAccessToken={MAPBOX_TOKEN}
      mapStyle={mapStyle}
      onViewportChange={nextViewport => setViewport(nextViewport)}
      onLoad={onLoad}
      ref={ref => (window.mapRef = ref && ref.getMap())}
      {...viewport}
    />
  );
}

我读过几个与我的问题相似的问题，但是，none 其中的问题适用于我的 case.Here 它们是：

Answer 1

你做了一个Context.Provider:

export function MapProvider({ children, ...props }) {
  const [viewport, setViewport] = React.useState(INITIAL_STATE);

  const onLoad = () => {
    setViewport(DRC_MAP);
  };

  return (
    <MapContext.Provider
      value={{
        viewport,
        setViewport,
        onLoad
      }}
      {...props}
    >
      {children}           // <-- Children are consumers
    </MapContext.Provider>
  );
}

但是你没有消费上下文：

// Somewhere in the code you need to consume its context
function Consumer() {
  return (
    <MapProvider>
      <Map />
    </MapProvider>
  );
}

然后useContext有效：

export default function Map() {
  // Child of MapContext.Provider,
  // so it can consume the context.
  const { viewport, setViewport, onLoad } = useContext(MapContext);
  ...
}

访问 Context 值时获取 undefined

Getting undefined while accessing Context values

reactjs

react-context

react-hooks