React useContext值未从提供程序传递？

Question

我正尝试使用useContext传递一个值，如下所示

这是Context.js

export const selectedContext = React.createContext();

export const SelectProvider = () => {
  return (
    <selectedContext.Provider value={"Team One"}>
      <Cards />
      <Pies />
    </selectedContext.Provider>
  );
};

我正在像这样的组件之一中调用上下文

这在Card.js（提供商中的孩子）中

const value = React.useContext(selectedContext);
console.log(value);

当我初始化React.createContext中的值时，该值将向下传递到我的组件，但是当我尝试使用提供程序时，它不起作用。

我在做什么错了？

Answer 1

您的代码很好，但是您应该在提供者的子组件中“调用上下文”，因为value的子代中可以使用Provider：

export const SelectedContext = React.createContext();

export const SelectProvider = ({ children }) => {
  return (
    <SelectedContext.Provider value={'Team One'}>
      {children}
    </SelectedContext.Provider>
  );
};

const ProviderChecker = () => {
  const value = React.useContext(SelectedContext);
  return <div>{value}</div>;
};

const App = () => {
  return (
    <SelectProvider>
      <ProviderChecker />
    </SelectProvider>
  );
};