基于API的API搜索

Question

我是新的反应，我想运行基于API的搜索。我已经编写了一个具有搜索功能的示例代码，但它并不是按照要求工作的。我想从列表中搜索，但是当我在搜索框中写任何东西时，它总是给出与整个列表相同的数组。请帮助我，让我知道哪里的代码错了。这是我的代码：

TestEntry.js

import React , {useState,useEffect} from  'react'
import {Table} from 'reactstrap'
import {Navbar,Nav,NavDropdown,Form,FormControl,Button} from 'react-bootstrap'
//import axios from 'axios'
import Loading from './loading.gif';


const CoinGecko = require('coingecko-api');
const CoinGeckoClient = new CoinGecko();
function TestEntry(){


const[item,SearchData]=useState([]);
const[cryptos,setCryptos]=useState([]);

useEffect(()=>{
    fetchItems()
},[])

const fetchItems=async()=>{
    const url="https://api.coingecko.com/api/v3/coins/list";
    const response= await fetch(url);
    const info=await response.json();
    console.log(info);
    setCryptos(info);
}


const Search=(key)=>{
    console.log(key);
    fetch("https://api.coingecko.com/api/v3/coins/list?q="+key)
    .then((data)=>{
        data.json().then((resp)=>{
            console.warn("resp:",resp)
            SearchData(resp)
        }) 
    })

}

const cryptoJsx=cryptos.map(crypto=>(
    <div key={crypto.id}>
            {crypto.id}
    </div>
));

        return(
            <div>
                Search:
                <input type="text" onChange={(event)=>Search(event.target.value)}/>
                <div>
                    {
                        {item} ? 
                        <div>
                            {
                                item.map((items)=>
                                <div key={items.id}>{items.name}</div>
                                )
                            }

                        </div>
                        :  ""
                    }
                </div>
                        {cryptoJsx}


            </div>
        )

}

export default TestEntry

Answer 1

搜索api似乎不起作用。当我尝试api-在浏览器中单独搜索文本时，它返回完整的结果。

总之..。

您可以在本地进行搜索，即过滤cryptos数组。它将导致重呈现和只显示过滤的结果。注意：

• 维护cryptos的副本，并且始终基于原始的筛选器，并且只对cryptos进行变异。这样，搜索工作(输入char和删除char)和搜索结果都是重新呈现的automatically
• The过滤状态数据的缺点是，如果您真的想使用api文档并使用正确的端点，来自服务器的新数据只能在客户端刷新
• 中获得。还可以考虑使用脱钩。Perform debounce in React.js

我已经查过了，搜索还不错。

import React, { useState, useEffect } from "react";

function TestEntry() {
  const [item, SearchData] = useState([]);
  const [cryptos, setCryptos] = useState([]);
  const [origCryptosCount, setOrigCryptosCount] = useState([]);

  useEffect(() => {
    fetchItems();
  }, []);

  const fetchItems = async () => {
    const url = "https://api.coingecko.com/api/v3/coins/list";
    const response = await fetch(url);
    const info = await response.json();
    setCryptos(info);
    setOrigCryptosCount(info);
  };

  // const Search_Old = key => {
  //   console.log(key);
  //   fetch("https://api.coingecko.com/api/v3/coins/list?q=" + key).then(data => {
  //     data.json().then(resp => {
  //       SearchData(resp);
  //     });
  //   });
  // };
  //
  const Search = key => {
    const newResults = origCryptosCount.filter(crypto => crypto.name.includes(key));
    console.log('newResults', newResults);
    setCryptos(newResults);
  };

  const cryptoJsx = cryptos.map(crypto => (
    <div key={crypto.id}>{crypto.id}</div>
  ));

  return (
    <div>
      Search:
      <input type="text" onChange={event => Search(event.target.value)} />
      {cryptoJsx}
    </div>
  );
}

export default TestEntry;