與 Typescript.filter 反應給我錯誤

Question

所以，我正在嘗試從 API 過濾數據，但我是 Typescript 的新手，我無法修復此錯誤： Property 'filter' does not exist on type 'string'.

function App() {
  const [coins, setCoins] = useState<string>('')
  const [search, setSearch] = useState<string>('')

  useEffect(()=>{
    axios
    .get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false')
    .then(res =>{
      setCoins(res.data)
      console.log(res.data)
    })
    .catch(error=>console.log(error))
  },[]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value)
  }

  const filteredCoins = coins.filter((coin: any) =>
    coin.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className='coin-app'>
      <div className='coin-search'>
        <h1 className='coin-text'>Search a currency</h1>
        <form>
          <input
            className='coin-input'
            type='text'
            onChange={handleChange}
            placeholder='Search'
          />
        </form>
      </div>
      {filteredCoins.map((coin: any) => {
        return (
          <Coin
            key={coin.id}
            name={coin.name}
            price={coin.current_price}
            symbol={coin.symbol}
            marketcap={coin.total_volume}
            volume={coin.market_cap}
            image={coin.image}
            priceChange={coin.price_change_percentage_24h}
          />
        );
      })}
    </div>
  );
}

有人可以幫忙嗎？ 我試圖使 useState 成為一個數組，但它仍然給我這個錯誤。 老實說，我很困惑。

這是行：

const filteredCoins = coins.filter((coin: any) =>

Answer 1

您將coins聲明為string ：

const [coins, setCoins] = useState<string>('')

然后期望它在這里是一個數組：

const filteredCoins = coins.filter((coin: any) =>

如果您希望coins state 是一個對象數組，那么您必須這樣聲明它。

interface Coin {
  name: string
}
const [coins, setCoins] = useState<Coin[]>([])

現在你可以像這樣過濾它：

const filteredCoins = coins.filter((coin) =>
  coin.name.toLowerCase().includes(search.toLowerCase())
);

請注意，您無需在此處手動設置coin的類型。 Typescript 知道數組中的類型，因此它會在沒有您幫助的情況下將coin設置為正確的類型。