React App在提供捆绑文件时出错

问题描述

我正在构建一个React应用，该应用从用户那里获取数据并将其保存到MongoDB数据库中，并通过Node-Express后端服务器将数据列出回来。

该应用程序在开发服务器上运行良好，在构建时未显示任何错误，但是在服务于文件浏览器的节点服务器显示错误时。错误来自Context API的状态变量。

有十二个组件（几乎相同的组件）使用十二种不同的状态，并且所有这些组件都给出相同的错误。为了简单起见，我只发布了其中之一。

我尝试使用其他bundler（Parcel.js），但没有任何变化。 我制作了一个新的create-react-app，并复制了我的代码，然后在此处构建。也不行。

浏览器控制台上的错误

（https://drive.google.com/file/d/1lo9FKImrT-SoxulHa3vxPgRriu0laAkO/view?usp=sharing） （https://drive.google.com/file/d/10e3zHW-a60p461y10gxPjaMHjO4E8xWt/view?usp=sharing）

这是35671行

/*#__PURE__*/react_default.a.createElement("thead",null,/*#__PURE__*/react_default.a.createElement("tr",/*#__PURE__*/react_default.a.createElement("th","Kamp\xFCs Ad\u0131"),"Adresi"))),/*#__PURE__*/react_default.a.createElement("tbody",kampus.map(function (data) {
    return /*#__PURE__*/react_default.a.createElement(DaTarow,{
      key: data._id,data: data
    });

这是发生错误的组件：

import React,{ useContext,useState,useEffect } from 'react';
import { GlobalContext } from "../../../context/GlobalContext"
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Table from 'react-bootstrap/Table';
import Accordion from 'react-bootstrap/Accordion';
import Card from 'react-bootstrap/Card';
import Modal from 'react-bootstrap/Modal';
import InputGroup from 'react-bootstrap/InputGroup';



export default function Campus() {

    const { addData,kampus,getData,delData } = useContext(GlobalContext);


    const [name,setName] = useState("");
    const [address,setAddress] = useState("");

    
    
    useEffect( () => {
        getData();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    },[]);



    const onSubmit = async (e) => {
        
        e.preventDefault();

        const newCampus = {
            dataType: "kampus",name: name,address: address
        }

        // let form = new FormData(newCampus)
        await addData(newCampus);
        setName("");
        setAddress("");  
    }


    function DaTarow({data}) {
        return (
            <tr>
                <td>{data.name}</td>
                <td>{data.address}</td>
                <td><Button style={{position: "absolute"}} variant="danger" onClick={() => delData(data._id)}>Sil</Button></td>
                <td><Button style={{position: "absolute"}} variant="info" onClick={() => updateData(data._id)}>Düzenle</Button></td>
            </tr>
        )
    }




    return (
        <>
        <Accordion className="mt-5">
        <Card>
            <Card.Header>
                <Accordion.Toggle as={Button} variant="secondary" eventKey="0" >
                    Kampüs Ekle
                </Accordion.Toggle>
            </Card.Header>
            <Accordion.Collapse eventKey="0">
                <Form className="mt-4" onSubmit={onSubmit}>
                    <Form.Group className="mr-4 ml-4">
                        <Form.Control 
                            className="mb-3" 
                            type="text" 
                            placeholder="Please Add Name"
                            value={name} onChange={ (e) =>setName(e.target.value) }
                            />
                        <Form.Control 
                            type="text" 
                            placeholder="Please Add Address"
                            value={address} onChange={ (e) =>setAddress(e.target.value) }
                            />
                    </Form.Group>
                        <Button className="mb-4 mr-4 ml-4" variant="primary" type="submit">
                           Save
                        </Button>
                </Form>
            </Accordion.Collapse>
        </Card>
        </Accordion>

// This Piece is Where the Line 35671 is correspond
            <Table className="mt-5">
               <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>
                    {kampus.map( data => ( <DaTarow key={data._id} data={data}/> ))}
                </tbody>
            </Table>
        </>
    )
}

请求活动

我使用Morgan跟踪请求，这是它的列表。

Server is Listeing on 3010
MongoDB Connected: testcluster1-shard-00-02-bigu6.mongodb.net
GET /data-control 304 12.811 ms - -
GET /bundle.js 304 0.667 ms - -
GET /data-control 304 1.258 ms - -
GET /data-control 304 1.168 ms - -
GET /data-control 200 7.051 ms - 232
GET /data-control 304 7.551 ms - -
GET /data-control 200 7.380 ms - 232
GET /data-control 200 7.723 ms - 232
GET /data-control 200 6.813 ms - 232
GET /data-control 200 14.077 ms - 232
GET /index.js.map 200 2.149 ms - 232
GET /index.js.map 304 0.798 ms - -

这是提供文件的代码

// SERVE STATIC BUILD FILE
app.use(express.static("client/build"));

app.get("*",(req,res) => {
    res.sendFile(path.join(__dirname,"client","build","index.html" ))
})

这是服务器响应GET请求的方式：

// IMPORT ALL MODALS
const Kampus = require("../models/Kampus");
const Bolum = require("../models/Bolum");
const Derslik = require("../models/Derslik");
const Fakulte = require("../models/Fakulte");
const Ogreleman = require("../models/Ogreleman");
const MekanKati = require("../models/MekanKati");
const MekanTuru = require("../models/MekanTuru");
const MekanOzellik = require("../models/MekanOzellik");
const CalismaTuru = require("../models/CalismaTuru");
const AkadPoz = require("../models/AkadPoz");
const IdaPoz = require("../models/IdaPoz");
const DeRSSuresi = require("../models/DeRSSuresi");

exports.getData = async (req,res,next) => {
    try {
        const kampus = await Kampus.find();
        const bolum = await Bolum.find();
        const derslik = await Derslik.find();
        const fakulte = await Fakulte.find();
        const ogreleman = await Ogreleman.find();
        const mekanKati = await MekanKati.find();
        const mekanTuru = await MekanTuru.find();
        const mekanOzellik = await MekanOzellik.find();
        const calismaTuru = await CalismaTuru.find();
        const akadPoz = await AkadPoz.find();
        const idaPoz = await IdaPoz.find();
        const deRSSuresi = await DeRSSuresi.find();

      return res.status(200).json({
          success: true,kampus: kampus,bolum: bolum,derslik: derslik,fakulte: fakulte,ogreleman: ogreleman,mekanKati: mekanKati,mekanTuru: mekanTuru,mekanOzellik: mekanOzellik,calismaTuru: calismaTuru,akadPoz: akadPoz,idaPoz: idaPoz,deRSSuresi: deRSSuresi
      });
    }
    catch (err) {
        return res.status(500).json({
            success: false,error: "Server Error"
        });
    }
}

这是全局上下文：

import React,{createContext,useReducer} from 'react';
import AppReducer from './AppReducer';
import initalState from "./State";
import axios from "axios";

export const GlobalContext = createContext(initalState);

export function GlobalProvider({ children }) {

    const [state,dispatch] = useReducer(AppReducer,initalState);

    // ACTIONS

    // GET DATA

    async function getData () {
        try {
            const res = await axios.get("http://localhost:3010/data-control");

            dispatch({
                type: "get-data",payload: res.data
            });
        }
        catch (err) {
            console.log(err)
        }
    }

    // ADD DATA

    async function addData (data) {
        try {
            const res = await fetch('http://localhost:3010/data-control',{
            method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(data),});

            let newRes = await res.json()

            dispatch({
            type: "add-data",payload: newRes.data,dataType: newRes.case
            })
        
        } 
        catch (err) {
            console.log(err.message)
        }
    }

    
    // DELETE DATA

    async function delData (id) {
        try {
            await axios.delete(`http://localhost:3010/data-control/${id}`);

            dispatch({
                type: "del-data",payload: id
            })
        } 
        catch (err) {
            console.log(err.message)
        }
    }
   

   return(
        <GlobalContext.Provider value={{
            kampus: state.kampus,fakulte: state.fakulte,bolum: state.bolum,ogreleman: state.ogreleman,derslik: state.derslik,ders: state.ders,mekanKati: state.mekanKati,mekanTuru: state.mekanTuru,mekanOzellik: state.mekanOzellik,calismaTuru: state.calismaTuru,akadPoz: state.akadPoz,idaPoz: state.idaPoz,deRSSuresi: state.deRSSuresi,delData,addData,}}>
            {children}
        </GlobalContext.Provider>
    )
}

我的状态文件：

const state = {
    kampus:[],bolum:[],derslik:[],fakulte:[],ogreleman:[],ders: [],mekanKati: [],mekanTuru: [],mekanOzellik: [],calismaTuru: [],akadPoz: [],idaPoz: [],deRSSuresi: []
}

export default state;

这是App Reducer处理状态的方式：

export default (state,action) => {
    switch (action.type) {

        case "get-data":

            return {
                ...state,kampus: action.payload.kampus,bolum: action.payload.bolum,derslik: action.payload.derslik,fakulte: action.payload.fakulte,ogreleman: action.payload.ogreleman,akadPoz: action.payload.akadPoz,idaPoz: action.payload.idaPoz,calismaTuru: action.payload.calismaTuru,mekanKati: action.payload.mekanKati,mekanTuru: action.payload.mekanTuru,mekanOzellik: action.payload.mekanOzellik,deRSSuresi: action.payload.deRSSuresi,}
    }
}

Webpack配置：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const rules = [
    {
        test: /\.js$/,exclude: /node_modules/,use: {
            loader: "babel-loader"
        }
    },{
        test: /\.css$/,// exclude: /node_modules/,use: ["style-loader","css-loader"]
    },{
        test: /\.html$/,use: [
          {
            loader: "html-loader"
          }
        ]
      }
]

module.exports = {
    entry: path.join(__dirname,"src","index.js"),output: {
        filename: "bundle.js",path: path.resolve(__dirname,"./build")
    },devServer: {
        historyApiFallback: true,},optimization: {
        minimize: false
    },module: {rules},plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",filename: "./index.html"
        })
    ]
}

通天塔：

{
    "presets": ["@babel/preset-env","@babel/preset-react"],"plugins": [
        ["@babel/transform-runtime"]
    ]
}

解决方法

也许会这样做：

  //I removed the success: true
  let jobj = {
      kampus: kampus,bolum: bolum,derslik: derslik,fakulte: fakulte,ogrEleman: ogrEleman,mekanKati: mekanKati,mekanTuru: mekanTuru,mekanOzellik: mekanOzellik,calismaTuru: calismaTuru,akadPoz: akadPoz,idaPoz: idaPoz,dersSuresi: dersSuresi
  };

  JSON.stringify(jobj);

  //some check up here (maybe you will send a 404 response)
  ...

  //then you send the json
  return res.status(200).json(jobj);