如何在react中从API获取数据并从API中进行搜索

Question

我正在尝试获取此API数据集https://kimiquotes.herokuapp.com/quotes在反应中。我想允许用户使用id从API进行搜索。每当用户单击搜索按钮时，我想更改搜索按钮的颜色。在用户输入id并单击搜索按钮后，我想获取数据集并将其显示在li列表中，我想显示id、引号和年份。这是我现在拥有的代码，但它不起作用。

import "mvp.css";
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Input } from "semantic-ui-react";
function City() {
const [APIData, setAPIData] = useState([]);
const [filteredResults, setFilteredResults] = useState([]);
const [searchInput, setSearchInput] = useState("");
useEffect(() => {
axios.get(`https://kimiquotes.herokuapp.com/quotes`).then((response) => {
setAPIData(response.data);
});
}, []);
const searchItems = (searchValue) => {
setSearchInput(searchValue);
if (searchInput !== "") {
const filteredData = APIData.filter((item) => {
return Object.values(item).join("").toLowerCase().includes(searchInput);
});
setFilteredResults(filteredData);
} else {
setFilteredResults(APIData);
}
};
return (
<div style={{ padding: 20 }}>
<Input
style={{ backgroundColor: "DodgerBlue" }}
icon="search"
placeholder="Search for 2008, 2012 or 2013 "
onChange={(e) => searchItems(e.target.value)}
/>
<div itemsPerRow={3} style={{ marginTop: 10 }}>
{searchInput.length > 1
? filteredResults.map((item) => {
const { id, quote, year } = item;
return (
<div>
<div>
<h1>ID: {id}</h1>
<li>QUOTE: {quote}</li>
<li>YEAR: {year}</li>
</div>
</div>
);
})
: APIData.map(() => {
return <h1></h1>;
})}
</div>
</div>
);
}
export default function App() {
return <City />;
}
```
`

Answer 1

api不响应单个值const URL=https://kimiquotes.herokuapp.com/quotes?s=${searchValue}；

而不是动态地提供值，尝试手动提供值一次

const URL=https://kimiquotes.herokuapp.com/quotes?s=1；

在控制台中查看您是否获得了请求的id的值。

function handleInput(){
console.log("From onclick -" +search);
fetch(`https://kimiquotes.herokuapp.com/quotes?id=1`)
.then((res)=>res.json())
.then((data)=>console.log(data));

}

我试图获得一张唱片，但失败了。