为什么导入到react jsx文件的函数返回“对象不是函数错误消息”？

问题描述

我正在使用React（JSX）和Redux前端为CRUD应用程序实现代码。如果我尝试在react render / return语句中运行从actions.js文件导入的函数，它无法识别导入的函数，但返回以下错误消息：

"Uncaught TypeError: Object(...) is not a function
    at InputBox.onSubmitForm (InputBox.jsx:100)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
onSubmitForm @ InputBox.jsx:100
callCallback @ react-dom.development.js:188"

以此类推...

当我单击inputBox.jsx：96时，它表示："Object(_actions_action_js__WEBPACK_IMPORTED_MODULE_2__["default"])(e.target[0].value);"

我们尝试在stackoverflow和google中搜索相同的错误消息。我们还安装了@ babel / plugin-proposal-class-properties devDependency。

InputBox.jsx（component）：

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import postToDo from '../actions/action.js' 

class InputBox extends Component {
  constructor(props) {
    super(props)  
  }
  onSubForm (e) {
    e.preventDefault();
    console.log(e.target[0].value)
    postToDo(e.target[0].value)
  }
  render() {
    return (
      <div>
        <form onSubmit={this.onSubForm}>
        <input
        type="text"
        className="form-control"/>
      <button className="btn btn-success">Add</button>
        </form>
      </div>
    )
  };
}
export default InputBox;

action.js：

export const postToDo = (url) => {
  console.log('I fired');
  fetch('http://localhost:3000/todos',{
    method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(url),})
    .then((res) => res.json())
    .then((data) => {
      const urlObj = {
        url,status: data.status,url_Id: data.url_Id,};
    })
    .then(() => this.props.dispatchCheckStatus(statusObj))
    .catch((err) => {
      console.error(err.messsage);
    });
};

webpack.config.js：

const path = require('path');
const webpack = require('webpack');


module.exports = {
  mode: 'development',entry: './client/index.js',output: {
    filename: 'bundle.js',path: path.resolve(__dirname,'build'),publicPath: '/',},module: {
    rules: [
      {
        test: /\.jsx?/,use: {
          loader: 'babel-loader',options: {
            presets: ['@babel/preset-env','@babel/preset-react']
          },exclude: /node_modules/
      },{
        test: /\.css$/,use: ['style-loader','css-loader'],],resolve: {
    extensions: ['.js','.jsx'],devServer: {
    historyApiFallback: true,contentBase: path.resolve(__dirname,'./client'),port: 8080,proxy: {
      '/api': 'http://localhost:3000',publicPath: '/build/',};

package.json：

{
  "name": "Scratch-Project","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {
    "start": "nodemon server/server.js","test": "echo \"Error: no test specified\" && exit 1","build": "cross-env NODE_ENV=production webpack","frontend": "NODE_ENV=development webpack-dev-server --open","dev": "concurrently \"cross-env NODE_ENV=development webpack-dev-server --open\" \"nodemon ./server/server.js\""
  },"repository": {
    "type": "git","url": "git+https://github.com/JoonyoungKim025/Scratch-Project.git"
  },"keywords": [],"author": "","license": "ISC","bugs": {
    "url": "https://github.com/JoonyoungKim025/Scratch-Project/issues"
  },"homepage": "https://github.com/JoonyoungKim025/Scratch-Project#readme","dependencies": {
    "body-parser": "^1.19.0","express": "^4.17.1","pg": "^8.3.3","prop-types": "^15.7.2","react": "^16.13.1","react-bootstrap": "^1.3.0","react-dom": "^16.13.1","react-redux": "^7.2.1","react-router": "^5.2.0","react-router-dom": "^5.2.0","redux": "^4.0.5"
  },"devDependencies": {
    "@babel/core": "^7.11.6","@babel/preset-env": "^7.11.5","@babel/preset-react": "^7.10.4","babel-core": "^6.26.3","babel-loader": "^8.1.0","babel-polyfill": "^6.26.0","babel-preset-es2015": "^6.24.1","babel-preset-stage-0": "^6.24.1","concurrently": "^5.3.0","cross-env": "^7.0.2","css-loader": "^4.3.0","isomorphic-fetch": "^2.2.1","nodemon": "^2.0.4","redux-devtools-extension": "^2.13.8","style-loader": "^1.2.1","webpack": "^4.44.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"
  }
}

.babelrc：

    {
  "presets": ["@babel/preset-env","@babel/preset-react"],"plugins": [
    ["@babel/plugin-proposal-class-properties",{ "loose": true }]
  ]
}

// {
//   "presets": [
//     [
//       "next/babel",//       {
//         "preset-env": { "targets": { "node": true } }
//       }
//     ]
//   ],//   "plugins": []
// }

很抱歉发布可能不必要的文件，我是初学者。

解决方法

您在此处使用默认导入语法导入：

import postToDo from '../actions/action.js' 

但是在行动中

export const postToDo = (url) => {

您使用的是命名为导出语法。

将导入更改为使用命名导入：

import { postToDo } from '../actions/action.js'

或将命名的导出更改为默认导出：

export default (url) => {