javascript - 如何从组件调用 API 数据

问题描述

我有一个应用程序搜索国家并在搜索结果仅包含一个国家或用户选择显示有关该国家的更多信息后显示有关该国家的更多信息。我想调用一个 API 来显示那个国家首都的天气。我想将它添加到我的组件中。我已经有一个针对国家/地区的 API 调用，如何在组件加载后让我的天气 API 调用从组件中运行？

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

useEffect(() => {
 axios
   .get(`https://restcountries.eu/rest/v2/name/${searchName}`)
   .then(response => {
     console.log(`>> Response: ${JSON.stringify(response)}`);

     setCountries(response.data);
   });
}, [searchName]);

 const handleSearch = event => {
  setSearchName(event.target.value);
  };
  const Country = ({ capital, name, population, languages, flag }) => {
  const [show, setShow] = useState(false);
  return (
   <div>
      <p>
        {name}{" "}
       <button props={countries} onClick={() => setShow(!show)}>
        {show ? "hide" : "show"}>
       </button>
       {show && ( // use show flag to conditionally render country info
         <SingleCountry
           name={name}
           capital={capital}
           population={population}
           languages={languages}
           flag={flag}
         />
       )}
     </p>
   </div>
   );
 };

const SingleCountry = ({ name, capital, population, languages, flag }) => 
 {
return (
  <div>
    <h3>{name}</h3>
    <p>capital {capital}</p>
    <p>population {population}</p>
    <h2>languages</h2>
    <ul>
      {languages.map(el => (
        <li>{el.name}</li>
      ))}
    </ul>
    <img src={flag} alt="OOPS" class="flag-image" />
    {useEffect(() => {
      axios
        .get(
          `https://api.weatherstack.com/current? 
 ebff312fa5277278461024b26999308a&${capital}`
        )
        .then(response => {
          const apiResponse = response.data;
          console.log(
            `Current temparture in ${apiResponse.location.name} is 
${apiResponse.current.temperature}℃`
          );
        })
        .catch(error => {
          console.log(error);
        });
    })}
  </div>
 );
 };
 const Countries = () => {
  if (countries.length === 0) {
   return <span class="results__label"> Search something </span>;
 }
  if (countries.length === 1) {
   setCapital(countries.map(c => c.capital));
   console.log(capital);
   return countries.map(c => (
    <SingleCountry
      name={c.name}
      capital={c.capital}
      population={c.population}
      languages={c.languages}
      flag={c.flag}
    />
   ));
 }

 return (
  <div>
      <span class="results__label"> Search Results: </span>
    <div>
      {countries.map(c => (
        <Country
          name={c.name}
          capital={c.capital}
          population={c.population}
          languages={c.languages}
          flag={c.flag}
        />
      ))}
    </div>
  </div>
 );
};

return (
 <div>
   <div style={{ margin: "8px" }}>
     find countries <input onChange={handleSearch} />
   </div>
   <Countries />
   <div />
 </div>
 );
 };

标签： javascriptjsonreactjs

javascript - 如何从组件调用 API 数据

问题描述

解决方案

推荐阅读