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

我正在连接我的节点后端（使用Microsoft SQL Server连接数据库）以响应前端。注意：后端工作得很好，并且使用postman对所有端点进行了测试

连接到它时，向我抛出以下错误：参数“id”的验证失败。无效数字。“

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;

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;

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;

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;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
导入“/App.css”；
从“/components/Header”导入标题；
从“/components/Search”导入搜索；
从“/components/Events”导入事件；
常量应用=（）=>{
const[customers，setCustomers]=useState（[]）；
const[isLoading，setIsLoading]=useState（true）；
const[searchQuery，setSearchQuery]=useState（“”）；
useffect（（）=>{
const fetchEvents=async（）=>{
const res=等待axios(
`http://localhost:8080/api/event/${setSearchQuery}`
);
console.log（res.data）；
设置客户（资源数据）；
设置加载（假）；
};
fetchEvents（）；
}，[searchQuery]）；
返回(
setSearchQuery（sq）}/>
);
};
导出默认应用程序；

Event.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;

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;

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;

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;

从“React”导入React；
常量事件=（{customer}）=>{
返回(
{customer.id}


客户ID:{Customer.ID}


客户编号：{Customer.Cus\u no}


范围名称：{customer.RangeName}


颜色：{customer.Color}


刀片文本：{customer.BladeTExt}


特别提示：{customer.SpecialNotes}


箱子数量：{customer.Box\u Quantity}


);
};
导出默认事件；

Events.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;

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;

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;

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;

从“React”导入React；
从“/Event”导入事件；
从“/Spinner.js”导入微调器；
常量事件=（{customers，isLoading}）=>{
返回卸载(
) : (
{customers.map（（customer）=>(
//key={customer.id}
))}
);
};
导出默认事件；

Search.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;

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;

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;

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;

import React，{useState}来自“React”；
常量搜索=（{getQuery}）=>{
const[number，setNumber]=useState（0）；
const onChange=（sq）=>{
设置编号（sq）；
getQuery（sq）；
};
返回(
onChange（e.target.value）}
自动对焦
/>
);
};
导出默认搜索；

为了更好地理解，下面是一个示例SQL表输出，其中包含我创建的数据类型：

---

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

我想你的问题在这里：

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

用于获取事件的后端API需要一个id，当您的每个组件装载到dom时，

useffect

将启动并调用该API！但与此同时，您的

searchQuery

状态是一个空字符串

注:

您正在端点字符串中使用

setSearchQuery

，而不是

searchQuery

也就是说，我认为即使在更改URL中的bug之后，您仍然会得到一个错误！因为您仍然发送一个空字符串作为后端API的id

---

因此，最好的解决方案是为

useState

中的

searchQuery

提供一个默认id，而不是传递一个空字符串，或者如果无法提供默认值，请确保在向其提供空字符串时api不会中断

在验证过程中，您的后端似乎出现了问题？如果看不到后端代码，很难判断。我以为你会把它粘在一起