javascript React上下文值始终返回未定义

swvgeqrz 于 2023-01-24 发布在 Java

关注(0)|答案(2)|浏览(118)

我是新的工作环境，我只是想慢慢开始。我看到了一件事，记录您的提供程序来测试的价值，我得到了一个常数未定义的价值。我已经把他们在代码中的权利，看看是否改变了什么。

const PromptContext = createContext('test123');

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

在这个函数被调用时，日志值总是未定义的，无论提供者的值中有什么。有什么想法来解决这个问题吗？
最终目标是将提供者的值传递给这个使用者，它位于一个单独的react文件中

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

JavaScript

来源：https://stackoverflow.com/questions/75215619/react-context-value-always-returning-undefined

2条答案

按热度按时间

js81xvg61#

你的提供者不应该是函数的一部分（不管怎么说，你列出的方式是这样的）。当然，提供者将是一个函数，但是你不会像上面展示的那样仅仅把它包含在函数中。实际上比那更容易！
你想要这样：

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文件中，您将 Package 组件：

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

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

赞(0）回复(0）举报 2023-01-24

neekobn82#

React Context使用组件层次结构使状态广泛可用。
创建一个带有值的提供者，并使用它来 Package 其他组件，然后组件树中该提供者下的任何组件都可以使用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>
  );
};

赞(0）回复(0）举报 2023-01-24

我来回答

javascript React上下文值始终返回未定义

2条答案

相关问题

热门标签

最新问答