Блог

Я реализую код для CRUD-приложения, используя react (JSX) и redux для интерфейса. Если я попытаюсь запустить функцию, импортированную из actions.js файл внутри инструкции react render / return не распознает импортированную функцию, но возвращает сообщение об ошибке:

 "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;
  

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" amp;amp; 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) => {