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

Question

我正在将Node后端(使用Microsoft SQL Server连接数据库(连接到React前端。注意：后端工作得很好，并在所有端点上使用poster进行了测试。

当连接到它时，会出现以下错误："参数"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;

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;

搜索.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表输出，其中包含我创建的数据类型：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中的错误后，你仍然会收到错误！因为您仍然发送一个空字符串作为后端API的id！

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