React useContext 值没有从提供者传递过来？

Posted 2023-04-14

【中文标题】React useContext 值没有从提供者传递过来？

【英文标题】：React useContext value is not getting passed from the provider?

【发布时间】：2020-06-13 20:09:32

【问题描述】：

我正在尝试使用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 初始化值时，该值被传递给我的组件，但是当我尝试使用提供程序时它不起作用。

我做错了什么？

【问题讨论】：

控制台中是否出现错误？因为您的代码结构意味着Card 组件将尝试从Context.js 导入，而Context.js 尝试从Card.js 导入卡片。这意味着你有循环依赖

是的，我解决了。

【参考方案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>
  );
;

【讨论】：

我在 Cards 组件中调用它，它是提供程序中的子组件，但它仍然不起作用。

How to create a Minimal, Reproducible Example

这没有用，请尝试创建一个密码箱，或者至少向我们展示您的电话卡是如何工作的以及它是如何不起作用的。

您没有按照答案中的说明调用提供者，请参阅codesandbox.io/s/peaceful-star-hd8gb，您应该检查答案附带的沙箱...

【参考方案2】：

当您像这样使用React.useContext 时，它不会连接到<Context.Provider>

请参阅有关使用谁的文档React.useContexthere。

React.useContext 似乎不适用于 Provider 直接组件子组件，因此您需要在两者之间再制作一个组件。 （就像在文档示例中一样）

const selectedContext = React.createContext();

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

const Cards = () => 
  const value = React.useContext(selectedContext);
  console.log(value); // will not work

  return (
    <Card />
  );
;

const Card = () => 
  const value = React.useContext(selectedContext);
  console.log(value); // will work

  return (
    <div>My Card</div>
  );
;

如果您需要它在第一层组件上工作，您可以使用<Context.Consumer>，它将在其中工作。

const selectedContext = React.createContext();

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

const Cards = () => 
  const value = React.useContext(selectedContext);
  console.log(value); // will not work

  return (
    <div>
      <selectedContext.Consumer>
        (value) => (
          <h1>value</h1> // will work
        )
      </selectedContext.Consumer>
    </div>
  );
;