"TypeError：赋值语句右侧无法解构" useContext React Hooks

Question

我正在使用React Hooks，并遇到了useContext方法的问题。我的上下文类用于地图样式（使用Google Maps API），如下所示：

import React, { createContext, useState } from 'react';

const MapStyleContext = createContext();

function MapStyleProvider(props) {
const [selectedMapStyle, setSelectedMapStyle] = useState();

return (
    <MapStyleContext.Provider value={{ selectedMapStyle, setSelectedMapStyle}}>
        {props.children}
    </MapStyleContext.Provider>
);
}

export { MapStyleContext, MapStyleProvider };

我有一个地图组件，试图访问 selectedMapStyle 属性：

...
export default function Map() {
const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_MAPS_API_KEY
});
const { selectedMapStyle } = useContext(MapStyleContext);
...

最后，在MapStyle组件中，我试图使用setter setSelectedMapStyle来在用户更改单选按钮的值时进行设置：

import React, { useContext } from 'react';
import { Card, CardBody, Button, FormGroup, Label, Input } from 'reactstrap';
import { MenuContext } from '../../MenuContext';
import { MapStyleContext } from '../mapStyle/MapStyleContext'
import '../Tool.css';

export default function MapStyle() {
    const {setSelectedItem} = useContext(MenuContext);
    const {setSelectedMapStyle} = useContext(MapStyleContext);

    const mapStyles = [
        { 'label': 'Map (default)', 'value': 'default' },
        { 'label': 'Grayscale (Clean)', 'value': 'cleanGray' },
        { 'label': 'Subtle Grayscale', 'value': 'subtleGray' },
        { 'label': 'Ultra light', 'value': 'ultralight' },
        { 'label': 'Clean (no labels)', 'value': 'cleanNoLabel' },
        { 'label': 'Clean (roads)', 'value': 'cleanRoads' }
    ];

    return (
        <div className="tool">
            <Card>
                <CardBody>
                    <div className="clearfix">
                        <h3 className="float-left mb-0 mr-2">Map Style</h3>
                        <Button onClick={() => setSelectedItem(null)} className="float-right" close />
                    </div>
                    <hr />
                    <FormGroup tag="fieldset">
                        {mapStyles.map(mapStyle => (
                            <FormGroup key={mapStyle.value} check>
                                <Label check>
                                    <Input type='radio' name='mapStyle' value={mapStyle.value} onChange={setSelectedMapStyle(mapStyle.value)}/>
                                    {mapStyle.label}
                                </Label>
                            </FormGroup>
                        ))}
                    </FormGroup>
                </CardBody>
            </Card>
        </div>
    );
}

我不太确定自己哪里出了问题，但当我使用这个上下文时，上下文属性似乎从未正确加载（导致类型错误）。

- Andrew

---

你尝试过 onChange={() => setSelectedMapStyle(mapStyle.value)} 吗？ - Agustin Moles

你记得把 MapStyle 组件放在 MapStyleProvider 中吗？如果树中没有提供程序，你将无法访问上下文。 - Linda Paiste

@AgustinMoles 这确实有所帮助，谢谢！ - Andrew

@LindaPaiste，我忘记在Provider中包装MapStyle了。谢谢您的帮助！ - Andrew

Answer 1

你面临的问题是在初始化时，useContext(MapStyleContext)的值为null，而你从未将父组件或当前组件包装在Context.Provider中。

以下是一个示例：

function Map() {
 return (
  <Context.Provider>
    {/*children */}
  <Context.Provider>
 );
}

- Haneen Mahdin