Почему сервер webpack dev не запускает мой экспресс-сервер? - PullRequest
Новая
       13

Почему сервер webpack dev не запускает мой экспресс-сервер?

0 голосов
/ 30 апреля 2019

У меня есть простое веб-приложение, которое я создаю, используя экспресс и реакцию.Я обслуживаю весь интерфейсный пакет React через мой экспресс-сервер.

В настоящее время мой стартовый скрипт работает нормально, он собирает интерфейсный код и запускает мой экспресс-сервер.Когда я перехожу к приложению в моем браузере, все работает найти, фронт и бэкэндс.Однако когда я запускаю свой скрипт dev, мои конечные точки бэкэнда не работают, поэтому я получаю ошибки, а интерфейс никогда не рендерится.

Весь источник можно найти здесь , но я выложу соответствующие файлы ниже:

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"
  },
...

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 30 апреля 2019

Он работает на http://localhost:8080, однако у вас есть странная реализация, заключающая в себе всю функцию ReactDOM.render в обещании.Кроме того, если данные отсутствуют, это приводит к TypeError: this.props.contacts.map is not a function и ничего не отображается.

Вызовы извлечения API должны помещаться в жизненный цикл компонента componentDidMount.Затем этот class component должен возвращать некоторый условно визуализированный компонент на основе ответа.Вам нужно будет обработать все сценарии, в которых есть данные, отсутствуют данные и / или произошла ошибка API (в противном случае это приведет к сбою приложения).

Пример рабочего API (в частности, посмотрите containers/Users/index.js или приведенный ниже пример кода):

Edit API Example w/ Axios Mock Testing

контейнеры / Users / 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>
  );
}
...