React 上下文值总是返回 undefined

Question

我刚开始使用上下文，我只是想慢慢开始。 我看到了有关记录您的提供者以测试该值的事情，并且我得到了一个常量未定义的值。 我已经在代码中将它们并排移动，看看是否有任何改变。

const PromptContext = createContext('test123');

function generateRecipe() {
    <PromptContext.Provider value="hello">xxx</PromptContext.Provider>
    console.log(PromptContext.Provider.value);
    console.log("Generating recipe...");
  }
}

在这个 function 被调用时，无论 Provider 的值是什么，日志值总是未定义的。 关于解决这个问题的任何想法？

最终目标是将提供者的价值获取到这个消费者中，这个消费者在一个单独的反应文件中

<PromptContext.Consumer>
    {test => (
        <h1>{test.value}</h1>
    )}
</PromptContext.Consumer>

Answer 1

您的提供商不应该是 function 的一部分（无论如何，以您列出的方式）。 当然，提供者将是 function，但您不会像上面显示的那样将它包含在函数中。 实际上比这更容易！

你想要这样：

export const PromptContext = createContext();

export const PromptContextProvider = ({children}) => {
  // All of your logic here
  const baseValue = 'hello';

  return (
    <PromptContext.Provider value={{baseValue}}>
      {children}
    </PromptContext.Provider>
  )
}

您不要像上面那样将提供者与您的终端 function 混在一起。

相反，在您的 index.js 文件中，您将包装您的组件：

root.render(
  <PromptContextProvider>
    <App />
  </PromptContextProvider>
)

然后您可以通过在组件中使用const {baseValue} = useContext(PromptContext)来访问您的baseValue 。

Answer 2

React Context使用组件层次结构使 state 广泛可用。

您创建一个具有值的提供者并使用它来包装其他组件。 然后，提供者下的组件树中的任何内容都可以使用Context.Consumer或useContext()挂钩访问上下文值。

例如

const PromptContext = createContext('test123');

const App = () => (
  <PromptContext.Provider value="hello">
    <ChildWithConsumer />
    <ChildWithHook />
  </PromptContext.Provider>
);

const ChildWithConsumer = () => (
  <PromptContext.Consumer>
    {(prompt) => (
      <p>The context says "{prompt}"</p>
    )}
  </PromptContext.Consumer>
);

const ChildWithHook = () => {
  const prompt = useContext(PromptContext);

  return (
    <p>The context says "{prompt}"</p>
  );
};