时间戳

首页 > 解决方案 > 为什么导入到 react jsx 文件的函数返回“对象不是函数错误消息”？

reactjs - 为什么导入到 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（组件）：

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;

动作.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/',
  },
};

包.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": []
// }

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

标签： reactjswebpackimport

解决方案

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

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

但在行动中：

export const postToDo = (url) => {

您正在使用命名导出语法。

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

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

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

export default (url) => {

推荐阅读