Context api useContext 未更新，始终返回 null

Question

我去我的上下文，

export const LocationContext = createContext(null);
export const LocationProvider = LocationContext.Provider;
export const useLocationContext = () => useContext(LocationContext);

提供商，

export const Search = () => {
    const [ location, setLocation ] = useState(null)
    
    const handleLocateMe = () => {
        navigator.geolocation.getCurrentPosition((position) => {
            setLocation( { lat: position.coords.latitude, lon: position.coords.longitude} )
        });
    }

    return(
        <LocationProvider value={{location}}>
            <MapUISearch />
            <MapUIBtn _iconName={SmileOutlined} _type="primary" _className={styles.locateMe} _fn={()=> {handleLocateMe()}} />
        </LocationProvider>
    )
}

使用上下文，

const { location } = useLocationContext();

问题是它总是抛出 无法解构 'undefined' 或 'null' 的属性 location。

并且 useLocationContext 永远不会更新，returns 默认值为 null

仅供参考：我对另一个上下文有相同的实现，它按预期工作

提前致谢

Answer 1

我完全忘记了提供者必须在更高（父）组件上。我的提供者坐在子组件上。只需将 provider 更改为父组件并将 useContext 更改为子组件。

Context api useContext 未更新，始终返回 null

Context api useContext is not updating, always returning null

typescript

reactjs

react-redux

react-context