Question

我正在尝试使用上下文通过父级和子级树传递一些道具。

在根中，我配置如下：

    const [authenticated, setAuthenticated] = useState(false);

    const loginHandler = () => {
        setAuthenticated(true);

    return(
            <AuthContext.Provider
                value={{ authenticated: authenticated, login: loginHandler }}
            >
                {showCockpit ? (
                    <Cockpit showPerson={showPerson} toggle={togglePersonHandler} />
                ) : null}
            </AuthContext.Provider>)
    };

在根目录下的子级别1：

Cockpit.js

<AuthContext.Consumer>
                {(context) => (
                    <StyledButton onClick={() => context.login()}>Log in</StyledButton>
                )}
</AuthContext.Consumer>

在1级儿童以下的2级儿童中：

Person.js

<AuthContext.Consumer>
                {(context) =>
                    context.authenticated ? (
                        <h1>Authenticated!</h1>
                    ) : (
                        <h1>Please log in</h1>
                    )
                }
</AuthContext.Consumer>

当前配置应在开始时显示“请登录”，并且当用户按下“登录”按钮时，它将自动更改为“已认证”。但是，在这种情况下，它仅显示在开始处：“请登录”，但是当我按“登录”时，该值不会更改。

请注意，我已经使用了控制台日志，并发现状态“ Authenticated”的值确实在上下文中从false更改为true。有人知道为什么会这样吗？是因为从父母传给孩子时丢失了一些数据吗？

Answer 1

您的错误是在app.js中人员组件不在上下文提供程序之内

如下更改

 < AuthContext.Provider
value={{ authenticated: authenticated, login: loginHandler }}>
{showCockpit ? (
  < Cockpit showPerson={showPerson} toggle={togglePersonHandler} />
) : null}

{showPerson ? (
  <Persons
    persons={personState}
    clicked={deletePersonHandler}
    changed={nameChangeHandler}
  />
) : null}
  < / AuthContext.Provider>

当您访问提供者之外的上下文时，它将为您提供创建时提供的默认值。

您可以在此处查看示例

https://codesandbox.io/s/clever-bas-nbqlu

更改上下文时，AuthContext Consumer没有重新呈现

1 个答案: