Estoy tratando de envolver todos los componentes debajo de la aplicación en un contexto para proporcionar las cosas que quiero
(como puede ver, es mi componente UserContext)
enter code here import React, { useState, createContext, useContext } from 'react' const Context = createContext(); export let useUserContext = () => useContext(Context); export default function UsersContext({ children }) { const [users, setUsers] = useState(); const createUser = (user) => { if (!user.name || !user.email || !user.password) return; const newUsers = [...users, user]; setUsers(newUsers); } return ( <Context.Provider value={{ users, createUser }}> {children} </Context.Provider> ) }(es el componente de mi aplicación)
enter code here import Nav from "./components/nav/Nav"; import Container from "./components/container/Container"; import { BrowserRouter } from "react-router-dom"; import UsersContext from "./components/contexts/UserContext"; function App() { return ( <UsersContext> <BrowserRouter> <Nav /> <Container /> </BrowserRouter> </UsersContext> ); } export default App;Solía ser así en mis proyectos y no tuve ningún problema, pero ahora el error que aparece "TypeError: (parámetro desestructurado) no está definido" también dice que se debe a los niños en UserContext En mi opinión, no debería 't suceder tal vez usted puede ayudarme a encontrar el problema que no puedo ver.
Prueba: <Context.Provider value={[ users, { createUser } ]}>
en lugar de: <Context.Provider value={{ users, createUser }}>
editar:
también podría intentar: en lugar de
const newUsers = [...users, user]; setUsers(newUsers);hacer
setUsers((currentUsers) => [...currentUsers, user]);Encontré el problema. fue por el useState. no estaba definido y estaba llamando a la propiedad relacionada con useState en UserContext.