Question

因此，我正在为赫尔辛基大学（University of Helsinki）进行在线全程课程，希望我使用天气和气候API来显示有关该国及其当前天气的信息。

所以我有三个部分：应用程序，列表器和国家。在App内，我使用axios进行useEffect调用以获取国家/地区列表的数据。从那里我想要它，以便当您单击按钮或进行搜索时，它应该显示有关该国家的信息，包括天气。为此，当显示有关特定国家/地区的信息时，我还有一个针对天气的API的useEffect调用。但是，虽然第一个API调用似乎将数据存储在国家/地区列表中，但第二个调用却没有。

我尝试将第二个useEffect调用的依赖项更改为[name]，但这也不会带来结果，当我只记录具有这种依赖项类型的信息时，我只看到无限次调用安慰。尝试过使用其他API只是为了看看我是否以某种方式错误地调用了它，但即使是那些也导致了相同的情况。

在App组件内部，我打电话来获取有关所有国家/地区的信息，并且效果很好。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Lister from './Lister';

const App = () => {
  const [places, setPlaces] = useState([]);
  const [search, setSearch] = useState('');
  const [results, setResults] = useState('');

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

这里一切都很好。我能够看到和搜索所有内容。然后，我将其称为Lister，它仅将来自国家/地区搜索API的数据映射到使用“国家/地区”组件。

.....
  const listPlaces = () => {
    if (results.length === 1) {
      return (
        <div>
          {results.map(r => (
            <Country
              key={r.population / r.name.length + 5}
              name={r.name}
              capital={r.capital}
              population={r.population}
              languages={r.languages}
              image={r.flag}
            />
          ))}
        </div>
      );
    }

这是国家/地区的主要问题所在。当我再次为天气api调用useeffect时，似乎没有将其设置为天气变量

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

const Country = ({ name, capital, population, languages, image }) => {
  const [weather, setWeather] = useState([]);
  // have tried useState(), useState([]), useState({})
  const accessKey = '';

  useEffect(() => {
    axios
      .get(`http://api.weatherstack.com/...`)
      .then(r => {
        setWeather(r.data);
        console.log(r.data);
      });
  }, []);

  return (
    <div>
      <div className='Country'>
        <h1>Name: {name}</h1>
        <p>Capital: {capital}</p>
        <p>Population: {population}</p>

        <h2>Languages</h2>
        <ul>
          {languages.map(l => (
            <li key={l.name.length}>{l.name}</li>
          ))}
        </ul>
        <img src={image} alt="Country's flag" height='100' width='100' />
      </div>

      <div className='Weather'>
        <h1>Weather {weather.current.temperature} </h1>
        <h2>Temperature </h2>
      </div>
    </div>
  );
};

export default Country;

即使日志显示已加载数据，天气的类型也不确定，所以是否应该通过setWeather调用设置天气？

使用useEffect（）加载后无法在变量中设置数据

0 个答案: