来自消费者的React上下文值始终是它们的初始值

Question

我使用React上下文来传递数据，遵循文档，但我被初始值卡住了，不确定我做错了什么。

这就是我的上下文文件的样子：

export const ItemsContext = createContext([]);
ItemsContext.displayName = 'Items';

export const ItemsProvider = ({ children }) => {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(false);
const setData = async () => {
setLoading(true);
setItems(await getItemsApiCall());
setLoading(false);
};
useEffect(() => {
setData();
}, []);
console.warn('Items:', items); // This shows the expected values when using the provider
return (
<ItemsContext.Provider value={{ items, loading }}>
{children}
</ItemsContext.Provider>
);
};

现在，我想将这些项目输入到我的应用程序的相关组件中。我正在做以下事情：

const App = () => {
return (
<ItemsContext.Consumer>
{(items) => {
console.warn('items?', items); // Is always the initial value of "[]"
return (<div>Test</div>);
}}
</ItemsContext.Consumer>
);
}

但是，正如我的评论所说，items将始终为空。另一方面，如果我只使用ItemsProvider，我确实得到了正确的值，但此时需要直接在应用程序上访问它，所以ItemsContext.Consumer似乎更有意义。

我是不是做错了什么？

编辑：一种解决方法似乎是用Provider包装Consumer，但这感觉不对，在文档中没有看到。也许是这样吗？

所以本质上，像这样的东西：

const App = () => {
return (
<ItemsProvider>
<ItemsContext.Consumer>
{(items) => {
console.warn('items?', items); // Is always the initial value of "[]"
return (<div>Test</div>);
}}
</ItemsContext.Consumer>
</ItemsProvider>
);
}

Answer 1

您必须在App组件层次结构之上提供一个ItemsContext提供程序，否则将使用上下文的默认值。这种形式的东西：

<ItemsContext.Provider value={...}>
<App/>
</ItemsContext.Provider>