我试图从Store文件中得到statesetState,但我得到undefined.发生了什么,如何修复?

import React, {createContext, useState} from 'react'
import Header from './Header'

export const Data = createContext()


function Store() {
  const [state, setState] = useState(false)
  const  value = {state, setState}

  return (
    <Data.Provider value={value}>
      <Header/>
    </Data.Provider>
  )
}

export default Store
import React, { useContext} from "react";
import { Data } from "./Store";

function Header() {
  const Store = useContext(Data)
  
  console.log(Store) // I get undefined

  return (
    <div>
    </div>
  );
}

export default Header;

推荐答案

您正在创建Store,但从未调用它,这就是问题所在.将App组件包裹在Store内,它就会工作.链接here的工作示例.

指数js公司:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import Store from "./store";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Store>
      <App />
    </Store>
  </StrictMode>
);

Javascript相关问答推荐

为什么getRecord()会因为与_logger相关的错误而失败?(使用Hedera SDK)

对象和数字减法会抵消浏览器js中的数字

Redux工具包查询(RTKQ)端点无效并重新验证多次触发

node TS:JWT令牌签名以验证客户端和后台问题之间的身份验证

yarn安装一个本地npm包,以便本地包使用main项目的node_modules(ckeditor-duplicated-modules错误)

在服务器上放置了Create Reaction App Build之后的空白页面

如何在bslib nav_insert之后更改导航标签的CSS类和样式?

优化Google Sheet脚本以将下拉菜单和公式添加到多行

在画布中调整边上反弹框的大小失败

如何利用CSS中的隐藏元素实现平滑扩展和防止网格行间隙

未捕获的运行时错误:调度程序为空

当从其他文件创建类实例时,为什么工作线程不工作?

如何在脚本编译后直接将RxJ模块导入浏览器(无需Angel、webpack、LiteServer)

如果NetSuite中为空,则限制筛选

Angel Auth Guard-用户只有在未登录时才能访问登录页面,只有在登录时才能访问其他页面

Django模板中未加载JavaScript函数

如何设置时间选取器的起始值,仅当它获得焦点时?

Firefox的绝对定位没有达到预期效果

如何在Java脚本中添加一个可以在另一个面板中垂直调整大小的面板?

使用Firebase实时数据库`update`在同一 node 上执行多个更新