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

Posted 2023-04-14

【中文标题】类型错误：react__WEBPACK_IMPORTED_MODULE_0___default(...) 不是函数

【英文标题】：TypeError: react__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

【发布时间】：2020-08-06 20:43:09

【问题描述】：

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

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

【问题讨论】：

import createContext from 'react'

【参考方案1】：

在您的 TodoContext.js 中，您错误地导入了 createContext。而不是

import createContext from 'react';

你应该使用

import  createContext  from 'react';

【参考方案2】：

使用方括号导入createContext，以便 React 知道您使用的是函数而不是整个函数。这样，您实际上可以将函数导出。这是您的代码中的错误弹出的地方。如果你不这样做，那么 React 就不会认为 createContext 是一个函数。