typescript 和 react 搜索栏 api fetch

Question

我正在尝试在此搜索栏组件中获取作者姓名。这个想法是在搜索栏中获取作者的名字，并显示作者的图片和作者的名字。但这对我不起作用。有人可以帮助并解释为什么这不起作用。谢谢。

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;

Answer 1

你的url错了。

`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>
    );

typescript 和 react 搜索栏 api fetch

typescipt and react searchbar api fetch

api

typescript

reactjs