Question

在一段时间内第一次回到React并遇到一些奇怪的问题我无法解决问题。看起来我的进口表现不一致，我不确定为什么会这样。这是相关文件：

import React from 'react';
import axios from 'axios';
import {VanillaPuddingApi} from '../components/constants';

class Clients extends React.Component {
  constructor(props){
   super(props)

   this.state={
    clients: []
   }
  }

  componentDidMount(){
   debugger;
    alert(VanillaPuddingApi)
    axios
     .get(`${VanillaPuddingApi}/clients`)
     .then(({data}) => {
      debugger;
      })
     .catch((errors)=>{
       console.log(errors)
     })
    }


   render() {
    return (
     <div>
      {VanillaPuddingApi}
     </div>
     );
   }
  }

export default Clients;

此文件由默认create-react-app目录中的App.js文件在页面上正确呈现。此外，VanillaPuddingApi的值在DOM上正确呈现。 componentDidMount()调用中的第一个调试器有问题 - 如果我在该行的控制台中检查VanillaPuddingApi的值，则会收到以下错误消息：

`Uncaught ReferenceError: VanillaPuddingApi is not defined
    at eval (eval at componentDidMount (Clients.js:15), <anonymous>:1:1)
    at Clients.componentDidMount (Clients.js:15)
    at ReactCompositeComponent.js:264
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponent.js:263
    at CallbackQueue.notifyAll (CallbackQueue.js:76)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
    at ReactReconcileTransaction.closeAll (Transaction.js:209)
    at ReactReconcileTransaction.perform (Transaction.js:156)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at Object._renderNewRootComponent (ReactMount.js:319)
    at Object._renderSubtreeIntoContainer (ReactMount.js:401)
    at Object.render (ReactMount.js:422)
    at Object../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap d489f093a1a431f7a956:669)
    at fn (bootstrap d489f093a1a431f7a956:87)
    at Object.0 (test.js:11)
    at __webpack_require__ (bootstrap d489f093a1a431f7a956:669)
    at bootstrap d489f093a1a431f7a956:715
    at bundle.js:719`

然而，在下一行中，该值会按预期被警告。这里真正的问题是Axios不起作用。尝试在调试器中手动运行axios.get行时，我得到与上面相同的错误。我做了一些挖掘，发现有类似问题的人对他们的webpack.config.js文件有问题，但我看起来不像他们做的那样，这似乎并不能解释我当地的导入问题。

//webpack.config.js
module.exports = {
 module: {
  rules: [
   {
    test: /\.pug$/,
    use: [
    "pug-loader?self",
    ]
   },
   {
    test: /\.css$/,
    use: [
     "style-loader",
     "css-loader"
    ],
   }
  ]
 }
};

以及我的package.json文件：

//package.json
{
 "name": "vanilla-pudding-frontend",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
  "axios": "^0.16.2",
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "react-router-dom": "^4.2.2"
 },
 "devDependencies": {
   "react-scripts": "1.0.13"
  },
 "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
 }
}

最后

// components.constants
export const VanillaPuddingApi = "http://localhost:5000/"

非常感谢任何帮助，谢谢。

React中不一致的导入（create-react-app）

0 个答案: