React-Hooks:在ContextAPI中未定义“Alert”

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

const AlertContext = createContext();

const AlertProvider = ({ children }) => {
  const [alert, setAlert] = useState(null);

  const showAlert = (message) => {
    setAlert(message);
  };

  const hideAlert = () => {
    setAlert(null);
  };

  return (
    <AlertContext.Provider value={{ alert, showAlert, hideAlert }}>
      {children}
    </AlertContext.Provider>
  );
};

export { AlertContext, AlertProvider };

import React from 'react';
import { AlertProvider } from './AlertContext';
import App from './App';

const Root = () => {
  return (
    <AlertProvider>
      <App />
    </AlertProvider>
  );
};

export default Root;

import React, { useContext } from 'react';
import { AlertContext } from './AlertContext';

const MyComponent = () => {
  const { alert, showAlert, hideAlert } = useContext(AlertContext);

  const handleClick = () => {
    showAlert('This is an alert message!');
  };

  return (
    <div>
      {alert && <div>{alert}</div>}
      <button onClick={handleClick}>Show Alert</button>
    </div>
  );
};

export default MyComponent;