首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >react上下文:它正在打印空对象。

react上下文:它正在打印空对象。
EN

Stack Overflow用户
提问于 2021-10-15 05:43:54
回答 1查看 280关注 0票数 1

我试图传递我在setting.js中设置的值,并通过使用react上下文概念将其传递给我的所有子节点。

下面是我所有的密码。

thingscontext.js (这是我创建上下文对象的地方)

代码语言:javascript
复制
import React from "react";

const ThingsContex = React.createContext({});

export const ThingsProvider = ThingsContex.Provider;

export default ThingsContex;

setting.js (我的自定义提供者)

代码语言:javascript
复制
import React, { useState } from "react";
import ChildOne from "./Child_One";
import ChildTwo from "./Child_Two";
import { ThingsProvider } from "./thingscontext";

function Setting() {
  const [starttime, setStartTime] = useState(8);

  return (
    <div>
      <h2>Setting</h2>
      <ThingsProvider value={starttime}>
        <ChildOne />
        <ChildTwo />
      </ThingsProvider>
    </div>
  );
}

export default Setting;

Child_one.js (这是我要调用的输出值的地方)

代码语言:javascript
复制
import React, { useContext } from "react";
import ThingsContext from "./thingscontext";

function ChildOne() {
  const things = useContext(ThingsContext);

  console.log("things ", things);

  return (
    <div>
      <h2>Child One</h2>
    </div>
  );
}

export default ChildOne;

预期结果:打印从设置中传递的值

实际结果:空对象

这是我的码箱,只需导航到ChildOne页面并打开控制台,它将显示它正在打印空对象。任何帮助都是非常感谢的。

EN

回答 1

Stack Overflow用户

发布于 2021-10-15 05:59:47

当您导航到/childOne路由时,react路由器从index.js呈现这一行代码

代码语言:javascript
复制
      <Route path="/childone" component={ChildOne} />

这一行中的ChildOne不是上下文提供程序的子程序,因此它的默认值{}被记录下来。(因为您将上下文创建为React.createContext({})

如果导航到/setting,就会看到所需的结果。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69580425

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档