为什么webpack dev服务器没有启动我的快速服务器？

Question

我有一个简单的网络应用程序，我正在建设使用快递和反应。我通过我的快递服务器为整个前端React捆绑服务。

目前我的启动脚本运行正常，它构建前端代码并启动我的快速服务器。当我在浏览器中导航到应用程序时，一切都可以找到，前后端。但是，当我运行我的开发脚本时，我的后端端点不起作用，所以我收到错误，前端永远不会渲染。

整个来源可以找到here但我会把相关文件放在下面：

webpack.config.js：

module.exports = {
  mode: 'development',
  entry: './client/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: { 
              presets: ['@babel/preset-react']
            }
        }
      }, {
        test: /\.css$/,
        loader: 'style-loader'
        }, {
        test: /\.css$/,
  loader: 'css-loader',
  query: {
    modules: true,
    localIdentName: '[name]__[local]___[hash:base64:5]'
  }
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  },
  devtool:"#eval-source-map"
};

的package.json：

{
  "name": "contacts",
  "version": "1.0.0",
  "description": "A simple contacts app written using React, Node, and Mongo",
  "main": "index.js",
  "scripts": {
    "start": "npx webpack --mode=development && node server/server.js",
    "build": "webpack --mode=development",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config ./webpack.config.js --mode development"
  },
...

谢谢你的帮助！

Answer 1

它在http://localhost:8080上运行，然而，你有一个奇怪的实现，将你的整个ReactDOM.render函数包装在一个承诺中。此外，如果缺少数据，则会生成TypeError: this.props.contacts.map is not a function，并且不会显示任何内容。

API提取调用应放在组件的componentDidMount生命周期内。那么class component应该根据响应返回一些conditionally rendered组件。您需要处理存在数据，数据丢失和/或存在API错误的所有场景（否则，它会使应用程序崩溃）。

工作API示例（具体来看containers/Users/index.js或下面编写的示例代码）：

---

容器/用户/ index.js

import React, { Component } from "react";
import app from "../../utils/axiosConfig";
import ShowData from "../../components/ShowData";
import ShowError from "../../components/ShowError";
import ShowLoading from "../../components/ShowLoading";

export default class App extends Component {
  state = {
    data: [],
    hasError: "",
    isLoading: true
  };

  componentDidMount = () => {
    window.setTimeout(() => {
      this.fetchData("users"); // calling "fetchData" after 1.5seconds (not necessary, but this way, you'll see a "Loading" component when data isn't present yet)
    }, 1500);
  };

  fetchData = url =>
    app
      .get(`${url}`) // makes a request to the API
      .then(res => { // handles a successful API response
        if (!res.data) throw new Error("No data was found!");
        this.setState({ isLoading: false, data: res.data });
      })
      .catch(err => // handles an API error or no data response
        this.setState({ isLoading: false, hasError: err.toString() })
      );

  handleClick = () => {
    this.setState({ isLoading: true, data: [] }, () => {
      this.fetchData("todos");
    });
  };

  // the code below utilizes a ternary operator: if cond ? then : else 
  // (shorthand for if/else or if/elseif/else ...etc)
  // the code below can be read as: if isLoading is true, then return
  // "<ShowLoading/>"; if it's false, but there was an error, then
  // return "<ShowError ... />", else if isLoading is false and 
  // hasError is false, then return "<ShowData ... />"
  render = () => (
    <div className="app-container">
      {this.state.isLoading ? (
        <ShowLoading />
      ) : this.state.hasError ? (
        <ShowError error={this.state.hasError} />
      ) : (
        <ShowData data={this.state.data} handleClick={this.handleClick} />
      )}
    </div>
  );
}