React context not shared between components-CodePudding

I use a react context between 2 components, however when I set the value this context in the child filtersBar component, it does not update or useffect in the second child map component.

contextprovider

const SearchContext = createContext();

const SearchContextProvider = ({children}) => {
const [contextValue, setContextValue] = useState(null);            
    return (
    <SearchContext.Provider value={[contextValue, setContextValue]}>
        {children}
    </SearchContext.Provider>
);

index.js

 <SearchContextProvider>
    <FiltersBar/>
      <Map/>
    </SearchContextProvider>

Filtersbar.js

const FiltersBar = () => {
        const [searchContext,setSearchContext] = useContext(SearchContext);
        const [searchLocationResult, setsearchLocationResult] = useState(null);
        const [inputSearchLocation, setinputSearchLocation] = useState("");
  
 useEffect(() => {
// stuff
                 searchContext.autocompleteLocation = [46.6, 8.5]
              setSearchContext(searchContext)

        }, [searchLocationResult, inputSearchLocation]);

Map.js

const Map = () => {
  
    const [searchContext, setSearchContext] = useContext(SearchContext);


    useEffect(() => {
      console.log("use effect map" JSON.stringify(searchContext))
    }, [searchContext]);

I never see this use effect map console log message. What am I missing?

CodePudding user response：

If the code you've shown is an accurate representation of your real code, the problem is that you're mutating state, not creating a new one. When you set state, react does a === between the state before and the state after. It sees that they're the same object, so it thinks nothing has changed, and it does nothing.

So instead of this:

searchContext.autocompleteLocation = [46.6, 8.5]
setSearchContext(searchContext)

Do this:

const newState = {
  ...searchContext,
  autocompleteLocation: [46.6, 8.5]
}
setSearchContext(newState);

CodePudding user response：

Because of this

useEffect(() => {
  /// stuff
  setSearchContext(searchContext) // ----> here
}, [searchLocationResult, inputSearchLocation]);

searchContext never changes. it always null, you awlays set null to setSearchContext function. Maybe you only get first console.log like use effect mapnull when reload or component init

CodePudding user response：

React hook is a bit different with React state in Class component. React hook consider state changes only if it's new object, u should create new object when you update the state.

You can update the useEffect of FiltersBar as below: Filtersbar.js

const FiltersBar = () => {
        ...
 useEffect(() => {
// stuff
    setSearchContext({...searchContext, autocompleteLocation: [46.6, 8.5]})

}, [searchLocationResult, inputSearchLocation]);