TypeError: react__WEBPACK_IMPORTED_MODULE_0___default(...)不是一个函数。

Question

我正在使用React中的Context API制作一个To-do应用。在启动开发服务器时，它抛出了错误。

TypeError: 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 是一个函数。