参数 'id' 的验证失败。无效号码？

Question

我正在将我的 Node 后端（使用 Microsoft SQL 服务器连接数据库）连接到 React 前端。注意：后端运行良好，并针对所有端点使用邮递员进行了测试。

连接到它时，抛出此错误：“参数 [=42= 的验证失败]。无效数字。”

App.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import './App.css';
import Header from "./components/Header";
import Search from "./components/Search";
import Events from "./components/Events";

const App = () => {
  const [customers, setCustomers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");


  useEffect(() => {
    const fetchEvents = async () => {
      const res = await axios(
        `http://localhost:8080/api/event/${setSearchQuery}`
      );
      console.log(res.data);
      setCustomers(res.data);
      setIsLoading(false);
    };
    fetchEvents();
  }, [searchQuery]);
  
  return (
    <div className="container">
      <Header />
      <Search getQuery={(sq) => setSearchQuery(sq)} />
      <Events isLoading={isLoading} customers={customers} />
    </div>
  );
};

export default App;

Event.js

import  React from "react";

const Event = ({ customer }) => {
    return (
        <div className="card">
            <div className="card-inner">
                <div className="card-front">
                    <img src={customer.img} alt="" />
                </div>
                <div className="card-back">
                    <h1>{customer.id}</h1>
                    <ul>
                        <li>
                            <strong>Customer ID:</strong> {customer.id}
                        </li>
                        <li>
                            <strong>Customer Number:</strong> {customer.Cus_no}
                        </li>
                        <li>
                            <strong>Range Name:</strong> {customer.RangeName}
                        </li>
                        <li>
                            <strong>Color:</strong> {customer.Color}
                        </li>
                        <li>
                            <strong>Blade Text:</strong> {customer.BladeTExt}
                        </li>
                        <li>
                            <strong>Special Notes:</strong> {customer.SpecialNotes}
                        </li>
                        <li>
                            <strong>Box Quantity:</strong> {customer.box_qty}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    );
};

export default Event;

Events.js

import React from "react";
import Event from "./Event";
import Spinner from "./Spinner.js";

const Events = ({ customers, isLoading }) => {
    return isLoading ? (
        <Spinner />
    ) : (
        <section className="cards">
            {customers.map((customer) => (
                <Event key={customer.id} customer={customer}></Event>    //key={customer.id}
            ))}
        </section>
    );
};

export default Events;

Search.js

import  React, { useState } from "react";

const Search = ({ getQuery }) => {
    const [number, setNumber] = useState(0);

    const onChange = (sq) => {
        setNumber(sq);
        getQuery(sq);
    };

    return (
        <section className="search">
            <form>
                <input
                    type="Number"
                    className="form-control"
                    placeholder="Search Customer Numbers"
                    value={number}
                    onChange={(e) => onChange(e.target.value)}
                    autoFocus
                />
            </form>
        </section>
    );
};

export default Search;

为了更好地理解，这里有一个示例 SQL Table 输出，其中包含我创建的数据类型：https://dbfiddle.uk/?rdbms=sqlserver_2019&fiddle=c925fb80326b4c3ed2117beddb73b451

现在最重要的是，每当我使用端点“http://localhost:8080/api/events”时，整个客户数据集都会按预期正确显示。但是对于端点“http://localhost:8080/api/event/${setSearchQuery}”，它给了我错误。

Answer 1

我认为你的问题出在这里：

const [searchQuery, setSearchQuery] = useState("");

您用于获取事件的后端 API 需要一个 ID，当您的每个组件安装到 dom 时，您的 useEffect 启动并调用 API ！但同时你的 searchQuery 状态是一个空字符串！

注意：

const res = await axios(
  `http://localhost:8080/api/event/${setSearchQuery}`
);

您在端点字符串中使用 setSearchQuery 而不是 searchQuery!

话虽如此，我认为即使在 URL 中更改了该错误，您仍然会收到错误消息！因为您仍然发送一个空字符串作为后端的 id API!

所以最好的解决方案是在 useState 中为 searchQuery 提供默认 ID 而不是传递空字符串，或者如果您无法提供默认值，请确保您的api 向其提供空字符串时不会中断！

参数 'id' 的验证失败。无效号码？

Validation failed for parameter 'id'. Invalid number?

javascript

sql-server

ssms

node.js

reactjs