Estoy tratando de hacer una página web para mi proyecto Blockchain y me encuentro con el tutorial JS Mastery youtube web3 y lo estoy siguiendo. Estaba creando el botón de conectar la billetera, pero encontré algunos problemas al importarlo desde mi contexto. Debajo del código:
//inside my prenotationContext.jsx const PrenotationContext = React.createContext(); export default PrenotationContext; export const PrenotationProvider = ({children}) => { const [currentAccount, setCurrentAccount] = useState(""); const [formData, setFormData] = useState({addressTo: "", amount:"", keyword:"", description:"" }); const [isLoading, setIsLoading] = useState(false); ... const connectWallet = async () => { try { if (!ethereum) return alert("Please install MetaMask."); const accounts = await ethereum.request({ method: 'eth_requestAccounts', }); console.log(accounts) setCurrentAccount(accounts[0]); window.location.reload(); } catch (error) { console.log(error); throw new Error("No ethereum object"); } }; ... return ( <PrenotationContext.Provider value={{ connectWallet, currentAccount, formData, sendPrenotation, handleChange,}}> {children} </PrenotationContext.Provider> ); } //inside my welcome.jsx import PrenotationContext from '../context/PrenotationContext.jsx'; ... const Welcome = () => { // Transfering data from context/PrenotationContext to components const {connectWallet,currentAccount, formData, sendPrenotation, handleChange} = useContext(PrenotationContext); ... El error es el siguiente: Uncaught TypeError: Cannot destructure property 'connectWallet' of 'useContext(...)' as it is undefined at Welcome (Welcome.jsx:25:12)
Por cierto, no soy un desarrollador front-end y es la primera vez que uso JS y React, por lo que no me resulta fácil encontrar los errores.
Si desea llamar al contexto, debe envolver su componente por contextProvider.
const App = () => { return ( <PrenotationProvider> // some other components <Welcome /> // some other components </PrenotationProvider> ); };Ponga un proveedor en el alto nivel de aplicación, luego obtendrá todos los datos dentro de cualquier componente