类型错误：react__WEBPACK_IMPORTED_MODULE_0___default(...) 不是函数

Question

我正在使用 React 中的 Context API 制作一个待办事项应用程序。在启动开发服务器时，它抛出错误：

类型错误：react__WEBPACK_IMPORTED_MODULE_0___default(...) 不是函数

我是 React 的初学者，无法找出发生此问题的任何可能原因。这是我的App.js：

import React, {useReducer} from 'react';
import Container from "reactstrap/lib/Container";
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';

import {TodoContext} from './Context/TodoContext';
import todoReducer from "./Context/reducer";

const App = () => {
  const [todo, dispatch] = useReducer(todoReducer, [])
  return(
    <TodoContext.Provider value={{todo, dispatch}}>
      <Container fluid>
        <h1>
          Todo App with Context API
        </h1>
      </Container>
    </TodoContext.Provider>
  )
}

export default App;

我^16.3.1同时使用react和react-dom

Answer 1

在您TodoContext.js错误地导入createContext. 代替

import createContext from 'react';

你应该使用

import { createContext } from 'react';

Answer 2

使用括号导入createContext，以便 React 知道您正在获取函数而不是整个内容。这样你就可以实际导出该函数了。这就是您的代码中出现错误的地方。如果你不这样做，那么 React 就不会认为这createContext是一个函数。