組件內部的 function 不提供 React 上下文

Question

您好，我對 React Context 有疑問。 我正在使用 React-DnD，我試圖在feed function 中獲取上下文，但它是空的。 在這個 function 中，我得到了上下文默認值，但在 function 之外，我得到了正確的值，我不知道為什么。

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

語境：

 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

我不知道 ReactDnD，但我確實愛我一些 DnD，這就是我試圖提供幫助的原因。 我將在這里提出建議，並繼續編輯此答案，因為這比嘗試將其全部寫在評論中要容易，而且似乎沒有其他人在回答。

所以Mods，請不要刪除。 當我們弄清楚這一點時，我將格式化這個答案以最好地代表所問問題的答案。

---

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

這條線最讓我困惑。 主要是因為您在 Provider 內部使用了 state，那么為什么還需要在上下文本身中聲明items和setItems呢？

由於您在提供程序中使用 state ，您不能在上下文本身中刪除items和setItems ，然后傳遞為：

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