通过 useContext 传递状态时出现 InvalidValueError

Question

我这样设置上下文提供程序

import { createContext, useState } from 'react';

export const AppContext = createContext(null);

export default ({ children }) => {
  const [centre, setCentre] = useState({
    lat: 53.719028,
    lng: -2.072784,
  });
  const [radius, setRadius] = useState(2 * 1000);

  const store = {
    radius: [radius, setRadius],
    centre: [centre, setCentre],
  };

  return <AppContext.Provider value={store}>{children}</AppContext.Provider>;
};

然后像这样设置我的index.js

import App from './App';
import AppProvider from './components/utilities/context';

ReactDOM.render(
  <AppProvider>
    <App />
  </AppProvider>,
  document.getElementById('root'),
);

我正在尝试使用 App.js 中组件的上下文，所以在我的 Map.js 组件中我有：

import { AppContext } from '../utilities/context';

...

const { radius, centre } = useContext(AppContext);

return (<GoogleMap
        mapContainerStyle={mapContainerStyle}
        zoom={6}
        center={centre}
        options={options}
        onLoad={(map) => onMapLoad(map)}
      >
      ...
      </GoogleMap>)

如果我从地图组件中console.log(centre) 我得到正确的值，应用程序编译正常，但地图没有呈现，我在控制台中收到此错误：

InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number

Answer 1

您正在访问数组[radius, setRadius] const { radius, centre } = useContext(AppContext);

这就是我通常创建上下文提供程序的方式：

import { createContext, useState } from 'react';

export const AppContext = createContext(null);

export default ({ children }) => {
  const [centre, setCentre] = useState({
    lat: 53.719028,
    lng: -2.072784,
  });
  const [radius, setRadius] = useState(2 * 1000);

  const contextValues = { centre, radius };
  const contextFunctions = { setCentre, setRadius };

  return <AppContext.Provider value={{ ...contextValues, ...contextFunctions }}>{children}</AppContext.Provider>;
};

然后你可以像这样访问这些：

const { radius, centre, setRadius, setCentre } = useContext(AppContext);