He estado tratando de aprender sobre el contexto de reacción y cómo cambiarlo desde el componente secundario, pero sigo recibiendo errores extraños.
aquí hago un contexto de matriz e intento cambiarlo al soltar el elemento del niño pero me da error TypeError: context.push no es una función
import { React, createContext, useContext } from "react"; import { useState } from "react"; import { useDrag, useDrop } from "react-dnd"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; function WebsiteBody(props) { const [context, add_to_context] = useContext(WebsiteContext); const [{ droppedItem, didDrop, isOver, canDrop }, drop] = useDrop(() => ({ accept: "card", drop: () => ({ name: "body", }), collect: (monitor) => ({ droppedItem: monitor.getItem(), didDrop: monitor.didDrop(), isOver: monitor.isOver(), canDrop: monitor.canDrop(), }), })); if (didDrop) { add_to_context(droppedItem.item); } return ( <div ref={drop} w="100vw" h="100vh" backgroundColor="yellow" display="flex" > {dropped_items.map((item) => item.name)} </Box> ); } const MyContext = createContext([]); function App(props) { const [context, setContext] = useState([]); function add_item(item) { setContext(context.push(item)); } return ( <DndProvider backend={HTML5Backend}> <MyContext.Provider value={[context, add_item]}> <WebsiteBody></WebsiteBody> </MyContext.Provider> </DndProvider> ); } export default App;Hay tres problemas en su código:
Array.pushContextType son diferentes. Uno es MyContext , el otro es WebsiteContext .createContextModifique el código de la siguiente manera:
WebsiteContext.js
export default React.createContext([ [], // default value for context value () => {} // default value for addItem ]);Aplicación.js
import WebsiteContext from './WebsiteContext'; const [context, setContext] = useContext([]); const addItem = (item) => { setContext(old => [...old, item]); }; <WebsiteContext.Provider value={[context, addItem]}> </WebsiteContext.Provider>WebsiteBody.js
import WebsiteContext from './WebsiteContext'; const [context, add_to_context] = useContext(WebsiteContext);