Question

我正在尝试学习如何在反应中使用API。我正在使用Rest countires API搜索国家名称。我正在从https://restcountries.eu/rest/v2/all获取数据，但是由于无法在对象上使用地图，因此我不知道如何处理该数据。

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

const App = () => {
 const [countries, setCountries] = useState([]);
 const [searchName, setSearchName] = useState("");

  useEffect(() => {
  axios.get("https://restcountries.eu/rest/v2/all").then(response => {
    setCountries(response.data);
   });
  }, []);

  const handleSearch = event => {
  setSearchName(event.target.value);
   };


   return (
  <div>
    <div>
      find countries <input onChange={handleSearch} />
    </div>
   <div></div>
  </div>
  );
 };

 export default App;

在键入以下内容后预期会列出国家：sw =博茨瓦纳，斯威士兰，瑞典...

Answer 1

从这个问题看来，这是您应用程序的要求- 1

您需要按国家/地区名称搜索
键入时，应显示与搜索匹配的国家/地区列表。

我使用您提供的代码-https://codesandbox.io/embed/58115762-rest-countries-o638k创建了此沙箱。

当您在搜索框中输入输入内容时，它会显示一对国家名称及其首字母。

这是我更改代码的方式：

您需要搜索国家吗？ -使用带有国家名称的search API作为文本输入的值-searchName

https://restcountries.eu/rest/v2/name/ $ {searchName}

要显示与您的搜索关键字相匹配的国家/地区的输出-map，countries并获得相应的关键字。将这些键作为道具传递给新创建的Country组件。

注意，我不需要更改您处理JSON响应的方式。 searchName和countries是用于呈现UI的仅有的两个状态变量。

Answer 2

从ajax请求获取后，您需要呈现国家/地区，例如：

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

 const App = () => {
 const [countries, setCountries] = useState([]);
 const [searchName, setSearchName] = useState("");

 useEffect(() => {
 axios.get("https://restcountries.eu/rest/v2/all").then(response => {
  setCountries(response.data);
 });
 }, []);

 const handleSearch = event => {
 setSearchName(event.target.value);
 };


 return (
  <div>
  <div>
   find countries <input onChange={handleSearch} />
  </div>
  <ul>
    {(countries.length<=0)?"":
    countries.map(country=> <li>country.name</li> )
        }
  </ul>
 </div>
);
};

export default App;

Answer 3

我认为这就是您要寻找的。如果您有任何疑问，请随时提出：）

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

const App = () => {
  const [countries, setCountries] = useState([]);
  const [searchName, setSearchName] = useState("");

  useEffect(() => {
    axios.get("https://restcountries.eu/rest/v2/all").then(response => {
      setCountries(response.data);
    });
  }, []);

  const handleSearch = event => {
    let str = event.target.value;
    let filteredCountries = countries.filter((country) => country.name.toLowerCase().includes(str.toLowerCase()));
    setCountries(filteredCountries);
    setSearchName(str);
  };


  return (
    <div>
      <div>
        find countries <input onChange={handleSearch} />
      </div>
      <ul> {(countries.length <= 0) ? "" : countries.map(country => <li>{country.name}</li>) } </ul>
    </div>
  );
};

export default App;

Answer 4

data =[your array];
countryList = data.map(data=>data.name)
console.log(countryList)

如何使用JSON响应中的对象数组获取值

4 个答案: