onSearch fetch coingecko api

Question

我正试图在coingeckoapi上实现onSearch获取功能。显然我做的每件事都很好。

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((中的值"coins"。一旦将控制权返回到渲染循环，它就会获取它的值。

但我认为你的错误的主要原因是/coins/market返回了一个数组，而/search返回的是一个包含数组的关键字为"coins"的对象。因此，对于搜索api，您需要response.data.coins。

更新

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

你已经走得很远了，UI看起来很棒。我在硬币文件的顶部留下了一些评论。正如我之前所说的，不要混合&匹配async/await和.then((.catch((。.then(

除了搜索硬币外，每次搜索文本更改时，您都会加载所有硬币。这导致你的硬币数量不断增加——这就是为什么你会收到关于重复密钥的警告。

项目正在进行中。。。有点您的实际问题是您从"；搜索"；与每次获取1页硬币所获得的数据非常不同还有其他问题，但这是首要问题。在Crypto API文档页面上，只需测试这两个API，您就会看到您得到的响应非常不同，不仅在结构上，而且在返回的实际数据上。

我调整了"；硬币；组件，这样当它"爆炸"时就不会爆炸；坏的"；数据-所以现在你可以看到一切都在工作，实验，等等。要解决这个问题，你需要有"；硬币"；对于所有硬币的列表；searchResultsCoins"；搜索结果。当您有searchResults时，显示您的搜索结果UI，而不是所有硬币的UI。