Question

嗨，我一直在尝试在我的项目中实现react context api，请按照指南中的步骤操作：https://developerhandbook.com/react/build-a-complete-property-listings-page-with-react/

当我尝试显示某些信息时，我最终遇到了错误。

这是我在控制台日志中得到的错误：


OrderListProvider.js:6 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react__.createContext is not a function
    at Object../src/context/OrderListProvider.js (OrderListProvider.js:6)
    at __webpack_require__ (bootstrap 39db4eed0e38b5656c68:678)
    at fn (bootstrap 39db4eed0e38b5656c68:88)
    at Object../src/components/Home.js (FetchData.js:3)
    at __webpack_require__ (bootstrap 39db4eed0e38b5656c68:678)
    at fn (bootstrap 39db4eed0e38b5656c68:88)
    at Object../src/App.js (fetch.js:461)
    at __webpack_require__ (bootstrap 39db4eed0e38b5656c68:678)
    at fn (bootstrap 39db4eed0e38b5656c68:88)
    at Object../src/index.js (index.css?f255:26)
    at __webpack_require__ (bootstrap 39db4eed0e38b5656c68:678)
    at fn (bootstrap 39db4eed0e38b5656c68:88)
    at Object.0 (registerServiceWorker.js:108)
    at __webpack_require__ (bootstrap 39db4eed0e38b5656c68:678)
    at bootstrap 39db4eed0e38b5656c68:724
    at bootstrap 39db4eed0e38b5656c68:724

我尝试更新我的反应，因为指南提到我至少需要16.3，而我只有16.0.0。

但是，更新后对最新版本的反应仍然是相同的。我似乎在github上的发行说明中找不到有关它的任何信息。

这是我的createContext函数：


const OrderListContext = React.createContext(DefaultState);

这是我消费的地方：

<OrderListProvider>
                <OrderListConsumer>
                    {function (value) {
                        const { orderList } = value
                        return (
                            <ul>
                                {orderList.map(listing => (
                                    <li>{listing.varetitle}</li>
                                ))}
                            </ul>
                        )
                    }}
                </OrderListConsumer>
            </OrderListProvider>

编辑：这是我的package.json

{
  "name": "React_Demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.3.1",
    "react": "^16.10.2",
    "react-bootstrap": "^0.32.4",
    "react-dom": "^16.10.2",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "rimraf": "^3.0.0"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

edit2：我已经在stackblitz中重新创建了代码，而没有获取功能的数据：https://stackblitz.com/edit/react-ssqc4t它似乎没有显示错误，所以我不明白为什么我的代码在Visual Studio 2017中不起作用

edit3：我也尝试验证并清除我的npm缓存，但是它仍然显示相同的错误。

edit4：Node.js也已经更新到最新版本。还是一样的错误。

Answer 1

您必须将react和react-dom的版本升级到 v16.4 或更高版本。

npm update react react-dom

如果使用的是纱线，则可以运行

yarn upgrade react react-dom

正在运行的演示
https://stackblitz.com/edit/react-context-api-456158

Answer 2

因此，我设法删除了整个节点模块文件夹，并再次使用

安装了它，从而使其正常工作

npm install

我为什么不能使用react.createContext（）

2 个答案: