onSearch获取coingecko api

Question

我试图在coingecko api.So上实现api.So的获取功能，显然我做的一切都是正确的。

onLoadMore按钮正常工作，一切正常，直到我在搜索栏中输入什么，然后应用程序崩溃与错误‘硬币是不可重复的’。

我用邮递员验证了请求(https://api.coingecko.com/api/v3/search?query=bitcoin)，它似乎给了我正确的答复。

谢谢。

import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

import CoinItem from '../CoinItem/CoinItem';
import Coin from '../routes/Coin';
import Spinner from '../Spinner/Spinner'
import searchIcon from './search-3-32.ico'

import './Coins.css';


const Coins = () => {

    const [isloading, setIsLoading] = useState(true)
    const [coins, setCoins] = useState([]);
    const [page, setPage] = useState(1);
    const [searchText, setSearchText]= useState()


    // const url = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=100&page=1&sparkline=false



    const loadMore = () => {
        setPage(page => page + 1)
    }

    const fetchAll = async () => {
       if(searchText !== '') {
           await axios.get(`https://api.coingecko.com/api/v3/search?query=${searchText}`).then((response) => {
               setCoins(response.data)
               console.log(response)
           }).catch(error => {
               console.log(error)
           })
       }
       await axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&page=${page}&per_page=10`).then((response) => {
            setCoins(coins => [...coins, ...response.data])
            // console.log(response)
        }).catch(error => {
            console.log(error)
        })
        setIsLoading(false)
    }

    useEffect(() => {
        fetchAll()
    }, [page, searchText])




    if (isloading) {
        return <Spinner />
    }

    return (
        <div className='container'>
            <div>

                <div className='heading'>
                    <img src={searchIcon} alt="icon" />
                    <input
                        // ref={initial}
                        className='search'
                        type="text"
                        value={searchText}
                        placeholder='Search coin'
                        onChange={(e) => setSearchText(escape.target.value)}
                    />
                </div>

                <div className='heading'>
                    <p>#</p>
                    <p className='coin-name'>Coin</p>
                    <p>Price</p>
                    <p>24h</p>
                    <p className='hide-mobile'>Volume</p>
                    <p className='hide-mobile'>Mkt Place</p>
                </div>

                    {coins.map(coins => {
                        return (
                            <Link to={`coin/${coins.id}`} element={<Coin />} key={coins.id}>
                                <CoinItem coins={coins} />
                            </Link>
                        )
                    })}
                <button className='load-more' onClick={loadMore}>Load More</button>
            </div>
        </div>
    );
};

export default Coins;

Answer 1

搜索结束后不会返回，所以它也调用了下一段代码。而且setCoins()中的“硬币”值也不会立即设定。一旦您将控件返回给render循环，它就会获得它的值。

但是，我认为导致您错误的主要原因是/硬币/市场返回数组，而/search则返回一个包含数组的“硬币”键的对象。因此，对于search，您需要response.data.coins。

更新

我把你的GitHub回购拉进了这个代码沙箱：https://codesandbox.io/s/magical-napier-f0jbx4

您已经走得很远了，UI看起来很棒。我在硬币档案的顶部留下了一些评论。正如我前面所说，不要混合&匹配异步/等待和.then() .catch()。.then()将解决承诺，因此您不需要等待它。

除了搜索硬币之外，每次搜索文本更改时，您都会加载所有硬币。这导致了你的硬币阵列的增长和增长-这也是为什么你收到关于重复键的警告。

这个项目现在正在运作..。差不多吧。你的实际问题是，你从“搜索”中得到的数据与每次从一页硬币中得到的数据有很大的不同。还有其他问题，但这是第一个问题。在Crypto文档页面上，只需测试这2个API，您就会看到所得到的响应是非常不同的，不仅在结构上，而且在返回的实际数据上。

我调整了“硬币”组件，这样当它得到“坏”数据时，它就不会爆炸--所以现在你可以看到所有的东西都在工作，实验等等。为了解决这个问题，你会希望所有硬币的列表都有“硬币”，搜索结果是"searchResultsCoins“。当你有searchResults时，显示你的搜索结果用户界面，而不是全硬币用户界面。