Utilizo un contexto de reacción entre 2 componentes, sin embargo, cuando configuro el valor de este contexto en el componente secundario de la barra de filtros, no se actualiza ni usa el efecto en el segundo componente del mapa secundario.
proveedor de contexto
const SearchContext = createContext(); const SearchContextProvider = ({children}) => { const [contextValue, setContextValue] = useState(null); return ( <SearchContext.Provider value={[contextValue, setContextValue]}> {children} </SearchContext.Provider> );índice.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]);Mapa.js
const Map = () => { const [searchContext, setSearchContext] = useContext(SearchContext); useEffect(() => { console.log("use effect map"+JSON.stringify(searchContext)) }, [searchContext]);Nunca veo este mensaje de registro de la consola del mapa de efectos de uso. ¿Qué me estoy perdiendo?
Si el código que ha mostrado es una representación precisa de su código real, el problema es que está cambiando de estado, no creando uno nuevo. Cuando establece el estado, la reacción hace un === entre el estado anterior y el estado posterior. Ve que son el mismo objeto, por lo que piensa que nada ha cambiado y no hace nada.
Así que en lugar de esto:
searchContext.autocompleteLocation = [46.6, 8.5] setSearchContext(searchContext)Hacer esto:
const newState = { ...searchContext, autocompleteLocation: [46.6, 8.5] } setSearchContext(newState);Debido a esto
useEffect(() => { /// stuff setSearchContext(searchContext) // ----> here }, [searchLocationResult, inputSearchLocation]); searchContext nunca cambia. siempre es nulo, siempre establece null en la función setSearchContext . Tal vez solo obtenga el primer archivo console.log como use effect mapnull cuando recargue o inicie el componente
El gancho React es un poco diferente con el estado React en el componente Class. El gancho de reacción considera los cambios de estado solo si se trata de un objeto nuevo, debe crear un objeto nuevo cuando actualice el estado.
Puede actualizar el efecto de uso de FiltersBar de la siguiente manera: Filtersbar.js
const FiltersBar = () => { ... useEffect(() => { // stuff setSearchContext({...searchContext, autocompleteLocation: [46.6, 8.5]}) }, [searchLocationResult, inputSearchLocation]);