.filter is not function

Question

下記のコードでリアクトを始めると、.filter is not functionと表示されます。
オブジェクトは、一致していると思うのですが…
どこが間違っているのでしょうか。
どうぞよろしくお願いいたします。

import React, { useState, useEffect } from "react";
import axios from "axios";
import Country from "./components/Country";
import CountryInfo from "./components/CountryInfo";

const App = () => {
  const [countries, setCountries] = useState([]);
  const [search, setSearch] = useState("");

  useEffect(() => {
    console.log('effect')
    axios
      .get("https://restcountries.com/#api-endpoints-v3-all")
      .then((response) => setCountries(response.data))
      .catch((error) => console.error(error));
  }, []);

  const handleSearchChange = (event) => setSearch(event.target.value);

  const countriesToShow =
     countries.filter((country) =>
          country.name.toLowerCase().includes(search.toLowerCase())
        );

  if (countriesToShow.length === 1) {
    return (
      <div>
        Find countries <input onChange={handleSearchChange} />
        <div>
          <CountryInfo country={countriesToShow[0]} />
        </div>
      </div>
    );
  }

  return (
    <div>
      Find countries <input onChange={handleSearchChange} />
      <div>
        {countriesToShow.length > 10
          ? "Too many matches, specify another filter"
          : countriesToShow.map((country) => (
              <div key={country.name}>
                <Country country={country} />
              </div>
            ))}
      </div>
    </div>
  );
};

export default App;

Comments

[maisumakun]

> オブジェクトは、一致していると思うのですが

想像ではなく、確認してみましょう。

Answer 1

GET先に行ってみたらAPIコールではなくAPIのドキュメントになってるので、それが原因かもしれないですね

Comments

[Chibichan]

ありがとうございます。変更して試してみます。

[wasd0109]

試してみたら現在のコードでconsole.log(countries)を執行してみたらHTMLが出てきましたので。
最初useStateでちゃんとcountriesを配列として初期化されたけど、その後のGETリクエストでリクエスト先を間違えたため、countriesが別のものに書き換えられ、配列じゃなくなったのが理由だと思います。

Answer 2

countriesが配列ではないからでしょうね

Comments

[Chibichan]

const [countries, setCountries] で配列が作られていると思ったのですが、そこがやはり間違っているんですね。