挂钩更改状态不会更新上下文提供者的值？

Question

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

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

我想用钩子改变内部组件的状态，但是当我点击navbar login 时我没有看到值被改变。

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

父母：

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

}

Navbar.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>
}

自定义钩子

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

  return {
    user,
    setUser
  }
}

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

Answer 1

目前，您只是在上下文中设置 user 值，这就是为什么可以获取正确值的原因。

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

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

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

}

这样您也可以在您的孩子中访问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 开始自定义钩子，因为这是编写自己的钩子时的最佳实践。

但是，重要的警告是，这并不是一个真正的好习惯。如果您的user 发生更改，所有只收听setUser 的组件也将获得更新，从而进行无用的重新渲染。您可以通过使用两种不同的上下文来解决此问题，一种用于值，一种用于更新程序。你可以阅读更多关于这个here

Answer 2

您不能从孩子那里更改父母的上下文信息，不。您需要从父级传递一些内容给子级，子级可以使用这些内容让父级知道上下文需要更新（例如父级的setUser 副本）。您可以通过道具或将setUser 添加到上下文中来做到这一点，尽管我倾向于将其作为需要能够设置用户的组件的道具，而不是他们都可以访问的上下文。

在两个地方都使用loginHook 不起作用的原因是每个组件（App 和Navbar）都有自己的user 副本。这是钩子如何工作的基础。 （如果它以某种方式让他们共享状态信息，useState 将根本不起作用——所有状态将在所有组件之间共享。）Dan Abramov 的A Complete Guide to useEffect 可能是一个有用的读物​​（它更多地是关于钩子和组件如何工作的而不是专门针对useEffect)。

Answer 3

您必须注意自定义挂钩不共享实例引用，因此如果您在 App 中使用 loginHook 而在 Navbar 中使用另一个，它们将创建 2 个独立的状态和更新程序

现在使用自定义钩子中的 setter 将更新上下文中的状态。

您可以通过编写 loginHook 来重构它，以便它在内部使用上下文，然后使用它

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

}

const Navbar = () => {
  const {user, setUser} = loginHook();

  return <div>{user ? <span>{user.name}</span> : <button onClick={() => {
    setUser({
      name: 'jane'
    })
  }}>navbar Login</button>}</div>
}
const loginHook = () => {
  const {user, setUser} = React.useContext(UserContext)

  return {
    user,
    setUser
  }
}

现在有多种方法可以编写此代码，但是在上述情况下最好的方法是根本不使用自定义钩子，因为它无论如何都没有用

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

}

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

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

Answer 4

在您的Navbar.js 中，您使用您的loginHook 钩子，它将创建一个与App.js 中使用的状态不同的新独立状态。您需要编写您的钩子，以便使用上下文而不是 useState:

/* UserContext.js */

const UserContext = createContext();

export const UserProvider = ({children}) => {
    const [user, setUser] = useState(null);

    return (
        <UserContext.Provider value={{user, setUser}}>
            {children}
        </UserContext.Provider>
    );
}

export const useLogin = () => useContext(UserContext);

然后像这样使用它：

/* App.js */

import {UserProvider} from './UserContext';

const App = () => (
    <UserProvider>
        <Navbar />
        <Content />
    </UserProvider>
);

和

/* Navbar.js */

import {useLogin} from './UserContext';

const Navbar = () => {
  const {user, setUser} = useLogin();

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