javascript - 失败：TypeError：__WEBPACK_IMPORTED_MODULE_2_react___default.a.createContext 即使在更新后也不是函数

Question

我的 React 应用程序有问题。在我做了一些更改并点击运行后，一切都出错了。我看了类似的问题，通常人们提供升级 NPM 和更新包。

我在终端中运行了这些命令：

npm install react@latest

和

npm install react-dom@latest

但没有奏效。我用谷歌搜索并尝试对包更改进行一些更改，但结果相同。我无法定位故障。

我的 package.json：

    {
      "name": "using-bootstrap-dropdown-tree-select",
      "version": "0.0.20",
      "description": "React Dropdown Tree Select component with Bootstrap styles. https://github.com/dowjones/react-dropdown-tree-select",
      "keywords": [],
      "homepage": "https://codesandbox.io/s/l765q6lmrq",
      "main": "index.js",
      "dependencies": {
        "react": "^16.12.0",
        "react-bootstrap": "^1.0.0-beta.16",
        "react-dom": "^16.12.0",
        "react-dropdown-tree-select": "2.0.2"
      },
      "devDependencies": {
        "react-scripts": "^3.3.0"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      }
    }

这是我的 index.js ：

import React from "react";
import { render } from "react-dom";
import DropdownTreeSelect from "react-dropdown-tree-select";
import "./index.css";
import data from "./data.json";
import { Button } from 'react-bootstrap'
import Modal from 'react-bootstrap/Modal'

let selectedNodes_ = [];

const onChange = (currentNode, selectedNodes) => {
  let list = [];
  console.log("path::", currentNode.path);
  console.log(currentNode);
  selectedNodes.map(n => {
    return (list.push(n.tagClassName))
  })
  selectedNodes_ = list;
  console.log(selectedNodes);
  console.log(selectedNodes_);

  bootDiv();



};

const bootDiv = () => {
  return (

    <Modal
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
      </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
      </p>
      </Modal.Body>
      <Modal.Footer>
        <Button type="submit">Close</Button>
      </Modal.Footer>
    </Modal>
  )
}

const assignObjectPaths = (obj, stack) => {

  Object.keys(obj).forEach(k => {

    const node = obj[k];

    if (typeof node === "object" && node !== null) {
      node.path = stack ? `${stack}.${k}` : k;

      assignObjectPaths(node, node.path);
    }
  });
};

const openDialogue = (list) => {

  console.log(list);

}

const getSelectedOperators = () => {

  let list = [];

  let listItemsContent = document.querySelectorAll(".tag");

  listItemsContent.forEach(i => {

    let iText = i.textContent;

    iText = iText.slice(0, -1);

    list.push(iText);

  });

  openDialogue(list);

}


const selectAll = () => {

  console.log("All selected");

}


const selectNone = () => {
  console.log("None selected");

}

const App = () => {

  assignObjectPaths(data);

  return (
    <div>
      <div className="tableHeader">
        <div> <h4>OPERATOR</h4></div>
        <div>
          <b>Select </b>
          <b><a onClick={selectAll}>all</a></b>/
          <b><a onClick={selectNone}>none</a></b>
        </div>
      </div>
      <div className="tableContent">
        <DropdownTreeSelect
          data={data}
          onChange={onChange}
          className="bootstrap-demo"
        />
        <button
          className="selectButton"
          type="submit"
          onClick={getSelectedOperators}
        >Grab selected
        </button>
      </div>
    </div>
  );
};

render(<App />, document.getElementById("root"));

标签： javascriptreactjsredux