Tengo un componente principal en el que, en el evento de clic de botón, pasé los datos al componente secundario usando CreateContext y los obtuve usando useContext hook en el componente secundario, pero no se pasa al componente secundario, resuélvalo, gracias, verifique los códigos a continuación import React, { useState , createContext, useContext } de "reaccionar"; const FormContext = createContext();
function Parent() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const obj = { name, email, password }; const handleClick = () => { <FormContext.Provider value={obj}> <Child /> </FormContext.Provider>; }; return ( <div> <input type="text" onChange={(e) => setName(e.target.value)} /> <br /> <input type="text" onChange={(e) => setEmail(e.target.value)} /> <br /> <input type="text" onChange={(e) => setPassword(e.target.value)} /> <br /> <button onClick={handleClick}>Click me</button> </div> ); } const Child = () => { const data = useContext(FormContext); return ( <> <div>{JSON.stringify(data)}</div> </> ); }; export default Parent; ````````````````````````````````````````````````````````````````Parece que en su ejemplo, el componente secundario no se representa en absoluto.
Si su plan es mostrar el componente secundario después de haber hecho clic en el botón "Hacer clic en mí", entonces podría representarlo condicionalmente y pasar los datos directamente sin usar la API de contexto. Como esto:
{showChild && <Child data={{name, email, password}}></Child> }Debe agregar la variable de estado showChild y configurarla como verdadera en la función handleClick.
A continuación se muestra un ejemplo de trabajo:
function Parent() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [showChild, setShowChild] = useState(false); const handleClick = () => { setShowChild(true); }; return ( <div> <input type="text" onChange={(e) => setName(e.target.value)} /> <br /> <input type="text" onChange={(e) => setEmail(e.target.value)} /> <br /> <input type="text" onChange={(e) => setPassword(e.target.value)} /> <br /> <button onClick={handleClick}>Click me</button> {showChild && <Child data={{name, email, password}}></Child> } </div> ); } const Child = (props) => { const data = props.data; return ( <> <div>{JSON.stringify(data)}</div> </> ); }; export default Parent;Si realmente tiene que usar Context-api, entonces necesita envolver el componente secundario en un FormContext.Provider y pasar obj como una propiedad de valor. Como esto:
<FormContext.Provider value={obj}> <Child></Child> </FormContext.Provider>A continuación se muestra un ejemplo de trabajo:
function Parent() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [showChild, setShowChild] = useState(false); const obj = { name, email, password }; const handleClick = () => { setShowChild(true); }; return ( <div> <input type="text" onChange={(e) => setName(e.target.value)} /> <br /> <input type="text" onChange={(e) => setEmail(e.target.value)} /> <br /> <input type="text" onChange={(e) => setPassword(e.target.value)} /> <br /> <button onClick={handleClick}>Click me</button> {showChild && <FormContext.Provider value={obj}> <Child></Child> </FormContext.Provider> } </div> ); } const Child = () => { const data = useContext(FormContext); return ( <> <div>{JSON.stringify(data)}</div> </> ); }; export default Parent;Prueba esto . <FormContext.Provider value={{obj}}> <Child /> </FormContext.Provider>;