我正在嘗試在此搜索欄組件中獲取作者的姓名。這個想法是在搜索欄中獲取作者的姓名并顯示作者的照片和作者的姓名。但這對我不起作用。有人可以幫助并解釋為什么這不起作用。謝謝你。
import { useEffect, useState } from "react";
import "./Searchbar.css";
import axios from "axios";
function Searchbar() {
const [query, setQuery] = useState("");
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const res = await axios.get(`https://picsum.photos/v2/?=${query}`);
setData(res.data);
};
if (query.length === 0 || query.length > 2) fetchData();
}, [query]);
return (
<div className="app">
<input
className="search"
placeholder="Search..."
onChange={(e) => setQuery(e.target.value.toLowerCase())}
/>
<div>{data}</div>
</div>
);
}
export default Searchbar;
uj5u.com熱心網友回復：
你的網址是錯誤的。
`https://picsum.photos/v2/?=${query}`
這進入了一個錯誤的頁面。您可以轉到 picsum.photos 并相應地使用它們可用的 API 端點，例如它們的串列端點。
https://picsum.photos/v2/list
看起來目前只有有限數量的作者，因此您可以獲取它，并將作者陣列存盤在其中data，然后單獨處理搜索。
const [query, setQuery] = useState("");
const [data, setData] = useState([]);
// Add one more state to store the authors being searched for
const [searchResults, setSearchResults] = useState([]);
useEffect(() => {
const fetchData = async () => {
const res = await axios.get(`https://picsum.photos/v2/list`);
setData(res.data);
};
fetchData();
}, []);
// Query that handles searching
useEffect(() => {
setSearchResults(data.filter((authorData) => authorData['author'].toLowerCase().includes(query)));
}, [query, data]);
return (
<div className="app">
<input
className="search"
placeholder="Search..."
onChange={(e) => setQuery(e.target.value.toLowerCase())}
/>
<div>{searchResults}</div>
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/472042.html