reactjs - React Hooks useContext 值未更新

Question

我正在根据来自另一个组件的表单输入更新用户名。我在提供程序组件中放置了一个 console.log 以确保它得到更新......它是！但是该值永远不会在接收该值的组件上更新。

这是提供者组件：

import React, { useState, useContext } from 'react';

export const GetFirstName = React.createContext();
export const GetLastName = React.createContext();
export const SetUserName = React.createContext();

export const UserNameProvider = ({ children }) => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  
  console.log(firstName);

  return (
    <SetUserName.Provider value={{ setFirstName, setLastName }}>
      <GetFirstName.Provider value={firstName}>
        <GetLastName.Provider value={lastName}>
          {children}
        </GetLastName.Provider>
      </GetFirstName.Provider>
    </SetUserName.Provider>
  );
};

帐户页面（使用提供者包装组件，以便它可以接收上下文）：

import React, { useContext } from 'react';
import { useHistory } from 'react-router-dom';
import { GetLoggedIn, UserNameProvider } from '../Providers/providers.js';
import AccountHeader from './Account/AccountHeader.js';
import AccountItemsList from './Account/AccountItemsList.js';
import LoginModal from './Modal/LoginModal.js';

const Account = () => {
  const history = useHistory();
  const loggedIn = useContext(GetLoggedIn);

  return !loggedIn ? (
    <LoginModal closeModal={history.goBack} />
  ) : (
    <div id='account-div'>
      <UserNameProvider>
        <AccountHeader />
      </UserNameProvider>
      <AccountItemsList /> // within AccountItemsList, 
                           // another component is wrapped the same way
                           // to use setFirstName and setLastName
                           // this works fine, as the console.log shows
    </div>
  );
};

export default Account;

最后是 AccountHeader 页面，它只接收 '' 的初始值，然后在另一个组件调用 setFirstName 之后永远不会反映当前值。

import React, { useContext } from 'react';
import { GetFirstName } from '../../Providers/providers.js';

const AccountHeader = () => {
  const firstName = useContext(GetFirstName);

  return (
    <div id='account-top'>
      <img src='#' alt='User' />
      <h1>{firstName}</h1>
    </div>
  );
};

只是为了检查我的理智，我在 codepen 中实现了一个非常简单的版本，它可以正常工作。在我的应用程序的其他地方，我正在使用上下文来检查用户是否已登录。这也可以正常工作。我几乎把头上所有的头发都拔掉了。

标签： reactjsreact-hooks