React 上下文值总是返回未定义

Question

我是处理上下文的新手，我只是想慢慢开始。我看到有关记录您的提供程序以测试该值的事情，并且我得到了一个恒定的未定义值。我已将它们在代码中移到彼此旁边，看看是否会改变任何内容。

const PromptContext = createContext('test123');

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

调用此函数时，无论 Provider 的值是什么，日志值始终是未定义的。有解决这个问题的想法吗？

最终目标是将提供者的价值传递给消费者，该消费者位于单独的反应文件中

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

Answer 1

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

你想要这样：

export const PromptContext = createContext();

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

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

您不会像上面那样将提供程序与最终功能混合在一起。

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

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

然后您可以通过在组件中使用

baseValue

来访问您的

const {baseValue} = useContext(PromptContext)

。

Answer 2

React Context 使用组件层次结构来使状态广泛可用。

您创建一个具有值的提供程序，并使用它来包装其他组件。然后，提供者下组件树中的任何内容都可以使用 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>
  );
};