Tengo un proyecto que se creó en "Creat React App" y tengo una matriz useState que se ve así:
const [State, setState] = useState([]); Esta matriz está en otra carpeta dentro de un componente llamado StateComp , pero también quiero cargar esta matriz en la carpeta principal ( App.js para este caso).
Intenté simplemente importar State y setState del archivo StateComp al archivo App.js , pero como esperaba, la importación falló.
¿Alguien tiene alguna idea?
¡Puedes usar ganchos personalizados para esto! Puede ver un ejemplo de esto aquí: https://stackoverflow.com/a/72048200/8222441 y un ejemplo de cómo se llama en otro archivo aquí: https://stackoverflow.com/a/72048200/8222441
Aquí hay una solución rápida para ayudar mientras tanto:
import { useState, useEffect } from 'react'; export function useSomeState(someParam) { const [someState, setSomeState] = useState([]); useEffect(() => { // do some state logic here if you want }); return { someState, setSomeState }; } // in another file... import { useSomeState } from './useSomeStateFile.js' function SomeComponent = () => { const { someState, setSomeState } = useSomeState(someParam) }Puede usar React Context para administrar esto o Redux . Aquí hay un ejemplo con React Context:
src/providers/StateProvider.js
import React, { useContext, useState } from "react"; import { createContext } from "react"; const StateContext = createContext({ state: [], setState: () => {}, }); export const useStateContext = () => useContext(StateContext); const StateProvider = ({ children }) => { const [state, setState] = useState([]); return ( <StateContext.Provider value={{ state, setState }}> {children} </StateContext.Provider> ); }; export default StateProvider; src/App.js
import React from "react"; import { useStateProvider } from "./providers/StateProvider"; export default App = () => { const { state, setState } = useStateProvider(); return <h1>MyApp</h1>; }; src/index.js
import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import StateProvider from "./providers/StateProvider"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <StateProvider> <App /> </StateProvider> </React.StrictMode> ); reportWebVitals();