He buscado en Internet la solución a esto, pero todavía no he encontrado una que funcione. He probado las siguientes herramientas de gestión de estado:
Quiero que mi sitio NextJS actualice un valor en cada página cuando hago clic en un botón simple. En este momento estoy usando Recoil, ya que lo he encontrado como una de las herramientas de administración de estado más fáciles hasta ahora.
Esta es mi _app.js
function MyApp({ Component, pageProps }) { return ( <RecoilRoot> < Component {...pageProps} /> </RecoilRoot> ) } Este es index.js :
export default function Home() { const [city, setCity] = useRecoilState(cityState) return ( <> <h1>{city}</h1> <button onClick={() => setCity("paris")}>click</button> </> ); }esta es la pagina 2
export default function SecondPage() { const [city, setCity] = useRecoilState(cityState) return ( <> <h1>{city}</h1> </> ); } ./state/state.js
export const cityState = atom({ key: "cityState", default: "moscow" }) Cuando hago clic en el botón de cambio en index.js , simplemente quiero que cambie para SecondPage y todas las páginas donde hago referencia al estado almacenado en state.js . En este momento cambia en index.js pero SecondPage permanece como "moscow". Quiero que se actualice cuando se haga clic en el botón de índice.
No sé cómo es la estructura de su código, pero creo que su opción más fácil es React Context API. Pongamos un ejemplo para una mejor explicación;
Su secuencia de comandos de contexto:
import React, { createContext, useState } from "react"; export const GlobalContext = createContext(); // you can set a default value inside createContext if you want export default function ContextProvider({ children }) { const [city, setCity] = useState("moscow") return ( <GlobalContext.Provider value={[city, setCity]}> {children} </GlobalContext.Provider> ); } Su archivo _app.js :
import ContextProvider from "your_directory" function MyApp({ Component, pageProps }) { return ( <ContextProvider> < Component {...pageProps} /> </ContextProvider> ) } archivo index.js :
import ContextProvider, {GlobalContext} from 'your directory' export default function Home() { const [city, setCity] = useContext(GlobalContext) return ( <> <h1>{city}</h1> <button onClick={() => setCity("paris")}>click</button> </> ); }Su guión para la página 2:
import ContextProvider, {GlobalContext} from 'your directory' export default function SecondPage() { const [city] = useContext(GlobalContext) return ( <> <h1>{city}</h1> </> ); }