组件内部的 function 不提供 React 上下文

Question

Hello I have a problem with React Context. I'm using React-DnD and I'm trying to get context in feed function but it's empty. In this function I'm getting context default value but outside that function I'm getting correct values and I don't know why.

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>
);
};

context:

 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;

Answer 1

I do not know ReactDnD, but I do love me some DnD, which is why I'm trying to help out. I'm going to make suggestions here, and continue to edit this answer, because it's easier than trying to write it all in comments, and no one else seems to be answering.

So Mods, please don't delete. When we figure this out, I will format this answer to best represent the answer to the question asked.

---

<InventoryContext.Provider value={{ items: items, setItems: setItems }}>

This line confuses me most. Mostly because, you're using state inside of the Provider, so why do you also need to declare items and setItems inside the context itself?

Since you're using the state inside the Provider, couldn't you remove the items and setItems inside the context itself, and then just pass as:

<InvetoryContext.Provider value={{ items, setItems }}>