NodeJS & React w/ DevExpress - 導入變量拋出語法錯誤

Question

我的客戶端有 ReactJS 和 DevExpress 的組合，並且由於我還沒有部署/啟動，我目前在我的本地主機上使用 Express 運行我的 API。

我的問題是我正在嘗試導入從模塊之一導出的變量以在 SQL 查詢中使用，但我在控制台中遇到了語法錯誤。 它被我的 DevExpress TreeList（封裝在 < > 中）捕獲，並且認為 < 是無效的語法。 我已經確認我的文件路徑是好的，我的 SQL 查詢針對我需要的東西和我需要它的地方，這只是我無法繞過的一個奇怪的語法錯誤。 最終目標是當我的 onFocusedRowChanged 函數觸發時，為了在我的樹中加載我的網格（或多或少嵌套），我特意將我的 SQLdb 登錄信息留為空字符串以用於這篇文章:)

任何可能導致控制台認為標准 < > 不正確的想法將不勝感激！

這是我的 server.js：

 var express = require('express'); var cors = require('cors'); var app = express(); import pkg from 'file:///src/Tree/WireTree.js' const { cellValue } = pkg; app.use(cors()); app.get('/wiretree', function (req, res) { var sql = require("mssql"); // config for your database var config = { user: '', password: '', server: '', database: '', options: { trustServerCertificate: true, instanceName: '', } }; // connect to your database sql.connect(config, function (err) { if (err) console.log(err); // create Request object var treeRequest = new sql.Request(); treeRequest.query( "SELECT wc.categoryID, Name, Filter, ParentCategoryID as ParentID from wirecategory wc INNER JOIN wirecategorytree wct on wc.CategoryID = wct.CategoryID ORDER BY [wct].[order]", function (err, recordset) { if (err) console.log(err) // send records as a response res.send(recordset); }); }); }); app.get('/wiremessage', function (req, res) { var sql = require("mssql"); // config for your database var config = { user: '', password: '', server: '', database: '', options: { trustServerCertificate: true, instanceName: '', } }; // connect to your database sql.connect(config, function (err) { if (err) console.log(err); // create Request object var wireRequest = new sql.Request(); wireRequest.query( "SELECT wm.WireID, wm.ReceiveTime, wcv.DisplayValue as Category, wpv.DisplayValue as Priority, wm.Headline from wiremessage as wm JOIN wireservice as ws on wm.WireServiceID = ws.WireServiceID JOIN wirecategoryvalue as wcv on wm.Category = wcv.value and wcv.WireCategoryGroupID = ws.WireCategoryGroupID JOIN wirepriorityvalue as wpv on wm.Priority = wpv.Value and wpv.WirePriorityGroupID = ws.WirePriorityGroupID WHERE" + `${cellValue}`, function (err, recordset) { if (err) console.log(err) // send records as a response res.send(recordset); }); }); }); var server = app.listen(4741, function () { console.log('Server is running on port 4741...'); });

這是它試圖導入並阻塞的 React/DevExpress 模塊：

 import React from 'react'; import { TreeList, SearchPanel, Scrolling, Lookup } from 'devextreme-react/tree-list'; import 'devextreme-react/text-area'; import 'whatwg-fetch'; import WireGrid from '../Tables/Wires/WireGrid.js' const expandedRowKeys = [1]; // const allowedPageSizes = [5, 10, 15, 20]; class WireTree extends React.Component { constructor(props) { super(props); this.state = { jsonData: null, } this.onFocusedRowChanged = this.onFocusedRowChanged.bind(this); } async componentDidMount() { const url = "http://localhost:4741/wiretree"; const response = await fetch(url); const data = await response.json(); // console.log('returned tree data: ', data); this.setState({ 'jsonData' : data.recordset, }) console.log('returned Tree state: ', this.state.jsonData); } onFocusedRowChanged(e) { var rowData = e.row && e.row.data, cellValue; if(rowData) { cellValue = e.component.cellValue(e.row.rowIndex, 'Filter'); module.export = cellValue.toString(); if (!cellValue) { return null; } else { console.log('cellValue: ', cellValue); } } } render() { return ( <TreeList id="wireTree" dataSource={this.state.jsonData} dataStructure="plain" rootValue="" defaultExpandedRowKeys={expandedRowKeys} columnAutoWidth={true} keyExpr="categoryID" parentIdExpr="ParentID" wordWrapEnabled={true} focusedRowEnabled={true} virtualModeEnabled={true} onFocusedRowChanged={this.onFocusedRowChanged} > <SearchPanel visible={true} /> <Scrolling mode="standard" /> <Lookup dataSource={this.state.jsonData} valueExpr="ID" displayExpr="Search" /> </TreeList> ); } } export default WireTree;

這是我的控制台顯示的錯誤：

{
  "name": "express",
  "version": "0.0.0",
  "private": true,
  "dataType" : "json",
  "type": "module",
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "bcrypt": "^5.0.1",
    "bearer": "^0.0.20",
    "cookie-parser": "~1.4.5",
    "cors": "^2.8.5",
    "crypto": "^1.0.1",
    "debug": "~4.3.2",
    "express": "~4.17.1",
    "http-errors": "~1.8.0",
    "https": "^1.0.0",
    "jade": "~1.11.0",
    "morgan": "~1.10.0",
    "mssql": "^7.1.3",
    "o.js": "^1.3.1",
    "odata": "^1.3.1",
    "passport": "^0.4.1",
    "sequelize": "^6.6.5",
    "ssl-root-cas": "^1.3.1",
    "tedious": "^11.4.0"
  }
}

最后但並非最不重要的是，這是我的 package.json：

 { "name": "express", "version": "0.0.0", "private": true, "dataType" : "json", "type": "module", "scripts": { "start": "node ./bin/www" }, "dependencies": { "axios": "^0.21.1", "bcrypt": "^5.0.1", "bearer": "^0.0.20", "cookie-parser": "~1.4.5", "cors": "^2.8.5", "crypto": "^1.0.1", "debug": "~4.3.2", "express": "~4.17.1", "http-errors": "~1.8.0", "https": "^1.0.0", "jade": "~1.11.0", "morgan": "~1.10.0", "mssql": "^7.1.3", "o.js": "^1.3.1", "odata": "^1.3.1", "passport": "^0.4.1", "sequelize": "^6.6.5", "ssl-root-cas": "^1.3.1", "tedious": "^11.4.0" } }

Answer 1

我相信你在onFocusedRowChanged函數中錯過了一個結束}