Почему я не могу использовать response.createContext ()

Question

Привет, поэтому я пытался внедрить api context context в мой проект. После выполнения шагов, описанных в руководстве: 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>

edit: это мой 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

Так что мне удалось заставить его работать, удалив всю папку моего модуля узла и снова установив ее с помощью

npm install

Answer 2

Вам необходимо обновить версию react & react-dom до v16.4 или выше.

npm update react react-dom

Если вы используете пряжу, вы можете запустить

yarn upgrade react react-dom

Рабочая демонстрацияhttps://stackblitz.com/edit/react-context-api-456158