Question

0

358

Vistas

Cómo obtener el valor de un componente a otro componente

Estoy creando un proyecto en el que necesito obtener el valor del estado de un componente para otro componente.

¿Cómo puedo obtener el valor?

Información

Ambos son componentes funcionales.
Necesito enviar datos de A (estado) a B (estado).
Los datos de estado se establecen desde el react dropdown . Que es un botón.
No uso el menú desplegable Link or Route a A , por eso no puedo obtenerlo con useParams()
Necesito establecer el valor en el componente B que obtendrá datos con el lenguaje de paso.
He importado todas las cosas necesarias y no tengo ninguna advertencia ni error.

Código del componente A

Enviar valor de este estado de language a B

 const A = () => { const [language, setLanguage] = useState('en'); return ( <Navbar expand="xl" bg='light' expand={false}> <Container> <DropdownButton id="dropdown-basic-button" title={<MdOutlineLanguage />}> <Dropdown.Item as="button" onClick={() => setLanguage('en')}>English</Dropdown.Item> <Dropdown.Item as="button" onClick={() => setLanguage('ar')}>العربية</Dropdown.Item> <Dropdown.Item as="button" onClick={() => setLanguage('bn')}>বাংলা</Dropdown.Item> </DropdownButton> </Container> </Navbar> ) }; export default A

Código del Componente B

Necesito obtener aquí el valor del estado A y establecerlo en el estado B Luego pase a useGetDataQuery & fetch data.

 const B = () => { let [language, setLanguage] = useState('en') const { data } = useGetDataQuery({language }) return ( <> </> ) } export default B

Sección Redux

Estoy usando readux & @reduxjs/toolkit para almacenar datos de búsqueda. ¿Puedo almacenar mis datos de language aquí? Entonces, ¿cómo puedo llegar desde cualquier lugar de mi componente?

react-rotuer-dom v6

 export default configureStore({ reducer: { [dataOne.reducerPath]: dataOne.reducer, [data2.reducerPath]: dataTwo.reducer, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }).concat([dataOne.middleware, dataTwo.middleware]), })

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-04T05:04:14.608Z

Tal vez en lugar de usar useState , puede usar un estado global usando useContext porque creo que su language se usará en varios lugares como cuerpo de solicitud y, por supuesto, para editar el valor del estado, puede combinarlo con useReducer .

// UPDATE

código de trabajo: https://codesandbox.io/s/sleepy-monad-21wnc

MyContext

 import { useReducer, useContext, createContext } from "react"; const initialValue = { language: "id" // other: "value", }; const AppContext = createContext(initialValue); const AppReducer = (state, action) => { switch (action.type) { case "CHANGE_LANGUAGE": return { ...state, ...action.payload }; default: return state; } }; const MyContext = ({ children }) => { const [state, dispatch] = useReducer(AppReducer, initialValue); return ( <AppContext.Provider value={[state, dispatch]}> {children} </AppContext.Provider> ); }; export const useAppContext = () => useContext(AppContext); export default MyContext;

este es el context y el componente reducer más adelante en App.js

App.js

 import A from "./A"; import B from "./B"; import MyContext from "./MyContext"; import "./styles.css"; export default function App() { return ( <MyContext> <div className="App"> <A /> <B /> </div> </MyContext> ); }

A.js

 import { useAppContext } from "./MyContext"; const A = () => { const [globalState, dispatch] = useAppContext(); const onChange = (e) => { dispatch({ type: "CHANGE_LANGUAGE", payload: { [e.target.name]: e.target.value } }); }; return ( <> <p>Start Of Component A </p> <input value={globalState.language} name="language" onChange={onChange} /> <p>End Of Component A </p> </> ); }; export default A;

B.js

 import { useAppContext } from "./MyContext"; const B = () => { const [globalState, dispatch] = useAppContext(); return ( <> <p>Start Of Component B </p> <h2>Language Val : {globalState.language}</h2> <p>End Of Component B </p> </> ); }; export default B;

0

358