Hola tengo un problema con React Context. Estoy usando React-DnD y estoy tratando de obtener contexto en la función de feed , pero está vacío. En esta función, obtengo el valor predeterminado del contexto, pero fuera de esa función obtengo valores correctos y no sé por qué.
const Dog = () => { const needsCtx = useContext(NeedsContext); const invCtx = useContext(InventoryContext); console.log(invCtx); const feed = () => { console.log(invCtx); }; needsCtx.saveCurrentContextToDatabase(); const [{ isOver }, drop] = useDrop( () => ({ accept: "food", drop: () => feed(), collect: (monitor) => ({ isOver: !!monitor.isOver(), }), }), [] ); return ( <div className={styles["wrapper-dog"]}> <img ref={drop} className={styles.dog} alt="dog" src={dog}></img> </div> ); };contexto:
import React, { useState } from "react"; export const InventoryContext = React.createContext({ items: {}, setItems: () => {}, }); const InventoryContextProvider = (props) => { const [items, setItems] = useState({}); return ( <InventoryContext.Provider value={{ items: items, setItems: setItems }}> {props.children} </InventoryContext.Provider> ); }; export default InventoryContextProvider;Voy a hacer sugerencias aquí, y continuaré editando esta respuesta.
<InventoryContext.Provider value={{ items: items, setItems: setItems }}> Esta línea me confunde más. Principalmente porque está utilizando el estado dentro del proveedor, entonces, ¿por qué también necesita declarar items y setItems dentro del contexto mismo?
Dado que está utilizando el estado dentro del proveedor, ¿no podría eliminar los items y setItems dentro del contexto mismo, y luego simplemente pasar como:
<InvetoryContext.Provider value={{ items, setItems }}>