EmployeeContext.js

import {createContext, useState} from 'react';
import {v4 as uuidv4} from 'uuid';


export const EmployeeContext = createContext();

const EmployeeContextProvider = (props) => {
    
    const [employees] = useState([
        {id:uuidv4(), name: 'Thomas Hardy', email: '[email protected]', address: '89 Chiaroscuro Rd, Portland, USA', phone: '(171) 555-2222'},
        {id:uuidv4(), name: 'Dominique Perrier', email: '[email protected]', address: 'Obere Str. 57, Berlin, Germany', phone: '(313) 555-5735'},
        {id:uuidv4(), name: 'Maria Anders', email: '[email protected]', address: '25, rue Lauriston, Paris, France', phone: '(503) 555-9931'},
        {id:uuidv4(), name: 'Fran Wilson', email: '[email protected]', address: 'C/ Araquil, 67, Madrid, Spain', phone: '(204) 619-5731'},
        {id:uuidv4(), name: 'Martin Blank', email: '[email protected]', address: 'Via Monte Bianco 34, Turin, Italy', phone: '(480) 631-2097'}
    ])
    
    return(
        
            <EmployeeContext.Provider value={{employees}}>
                {props.children}
            </EmployeeContext.Provider>
    )
}

export default EmployeeContextProvider;

EmployeeList.js

import { Button, Modal } from "react-bootstrap";
import { EmployeeContext } from '../contexts/EmployeeContext';
import { useState, useContext } from "react";
/* import { v4 as uuidv4 } from "uuid"; */
import Employee from "./Employee";
import AddForm from "./AddForm";

const EmployeeList = () => {
/*   const [employees, setEmployees] = useState([
    {
      id: uuidv4(),
      name: "Thomas Hardy",
      email: "[email protected]",
      address: "89 Chiaroscuro Rd, Portland, USA",
      phone: "(171) 555-2222",
    },
    {
      id: uuidv4(),
      name: "Dominique Perrier",
      email: "[email protected]",
      address: "Obere Str. 57, Berlin, Germany",
      phone: "(313) 555-5735",
    },
    {
      id: uuidv4(),
      name: "Maria Anders",
      email: "[email protected]",
      address: "25, rue Lauriston, Paris, France",
      phone: "(503) 555-9931",
    },
    {
      id: uuidv4(),
      name: "Fran Wilson",
      email: "[email protected]",
      address: "C/ Araquil, 67, Madrid, Spain",
      phone: "(204) 619-5731",
    },
    {
      id: uuidv4(),
      name: "Martin Blank",
      email: "[email protected]",
      address: "Via Monte Bianco 34, Turin, Italy",
      phone: "(480) 631-2097",
    },
  ]); */


  const {employees} = useContext(EmployeeContext)

  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <div className="table-title">
        <div className="row">
          <div className="col-sm-6">
            <h2>
              Manage <b>Employees</b>
            </h2>
          </div>
          <div className="col-sm-6">
            <Button  onClick={handleShow} className="btn btn-success text-white" data-toggle="modal">
              <i className="material-icons">&#xE147;</i>{" "}
              <span>Add New Employee</span>
            </Button>
          </div>
        </div>
      </div>
      <table className="table table-striped table-hover">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Address</th>
            <th>Phone</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <Employee employees={employees} />
        </tbody>
      </table>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header className="modal-header" closeButton>
          <Modal.Title>Add Employee</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <AddForm />
        </Modal.Body>

        <Modal.Footer>
          <Button onClick={handleClose} variant="secondary">Close Modal</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default EmployeeList;

我花了几个小时寻找解决方案，但无果。为什么我会遇到这个问题？我在终端中没有遇到任何问题，但本地浏览器给出了标题中写的问题。如果我使用命令行而不是 useContext(EmployeeContext) 函数，我不会遇到任何问题。最后，有没有什么可靠的来源可以自己找到解决方案。