javascript - Hook 更改状态不会更新上下文提供程序的值？

Question

我有 2 个组件和一个上下文提供程序，当我在父级调用我的钩子(Hook)时，我可以毫无问题地更改状态并让这 2 个组件通过上下文获取值

contex api 使用的工作演示，但我在父级调用更改状态，这不是我想要的 https://stackblitz.com/edit/react-51e2ky?file=index.js

我想用钩子(Hook)更改内部组件的状态，但当我单击导航栏登录时，我没有看到值发生更改。

https://stackblitz.com/edit/react-rgenmi?file=Navbar.js

父级:

const App = () => {
  const {user} = loginHook()
    return (
      <UserContext.Provider value={user}>
        <Navbar />
        <Content />
      </UserContext.Provider>
    );

}

导航栏.js

const Navbar = () => {
  const user = React.useContext(userContex)
  const {setUser} = loginHook()

  return <div>{user ? <span>{user.name}</span> : <button onClick={() => {
    setUser({
      name: 'jane'
    })
  }}>navbar Login</button>}</div>
}

自定义 Hook

const loginHook = () => {
  const [user, setUser] = React.useState(null)

  return {
    user,
    setUser
  }
}

我可以将 setUser 从父级传递给子级，但我想避免这种情况，我希望我可以无缝使用上下文 api 和 react 钩子(Hook)。

Answer 1

目前，您仅在上下文中设置 user 值，这就是获取正确值的原因。

但是，在您的 Navbar.js 组件中，您正在调用 loginHook，这将创建该钩子(Hook)的一个新“实例”，有效地拥有自己的状态。

我建议您也在您的上下文中添加更新功能

const App = () => {
  const {user, setUser} = loginHook()
    return (
      <UserContext.Provider value={{ user, setUser}}>
        <Navbar />
        <Content />
      </UserContext.Provider>
    );

}

这样你也可以在你的 child 中访问setUser，例如

const Navbar = () => {
  const {user, setUser} = React.useContext(userContex)

  return <div>{user ? <span>{user.name}</span> : <button onClick={() => {
    setUser({
      name: 'jane'
    })
  }}>navbar Login</button>}</div>
}

另外，请注意:最好使用 use 开始自定义钩子(Hook)，因为这是编写自己的钩子(Hook)时的最佳实践。

但是，重要的是，这并不是一个好的做法。如果您的用户发生变化，所有仅监听setUser的组件也将获得更新，从而进行无用的重新渲染。您可以通过使用两种不同的上下文来解决此问题，一种用于值，另一种用于更新程序。您可以阅读更多相关信息 here