Question

我是JS的初学者，因此会做出反应。我正在上webdev的fullstackopen课程，这是我必须要做的（在页面末尾练习）：https://fullstackopen.com/en/part2/getting_data_from_server

当我有一个国家/地区的唯一字词时，我必须显示该国家/地区的信息。我无法在页面上显示此信息。

我已经使用console.log（）函数来确保我正在到达那段代码（就是我），但是该代码没有被渲染。

我正在App组件中使用listHelper函数。（解决此问题后，我将在组织中工作）

const listHelper = (arr) => {
    const showCountry = (country) => () => setNewTerm(country.name)
    const languageList = (languages) => (
      languages.map(language => (
        <div key={language.name}>
          <li>{language.name}</li>
        </div>
      ))
    )
    if(arr.length > 10) {
      return (
        <div>
          Too many matches, specify another filter
        </div>
      )
    }
    else if(arr.length > 1) {
      return arr.map(country =>
        <div key={country.name}>
          {country.name} <button onClick={showCountry(country)}>show</button>
        </div>
       )
    }
    else if(arr.length === 1) {
        axios
          .get(`http://api.openweathermap.org/data/2.5/weather?q=${arr[0].capital}&units=metric&APPID=551a172ca30189b3cfecbb6f6e312e45`)
          .then(response => {
            console.log('else if')
            return (
              <div>
                {console.log('in div')}
                <h1>{arr[0].name}</h1>
                <p>capital {arr[0].capital}</p>
                <p>population {arr[0].population}</p>
                <h2>languages</h2>
                <ul>
                  {languageList(arr[0].languages)}
                </ul>
                <img src={arr[0].flag} width='100' height='100' alt='country flag' />
                <h2>Weather in {arr[0].name}</h2>
                <strong>temperature:</strong> {response.data.main.temp}
                <img src={response.data.weather.icon} width='100' height='100' alt='current weather' />
                <strong>wind:</strong> {response.data.wind.speed} meter/sec direction {response.data.wind.deg}
              </div>
            )
          })
      }
  }

预期结果：https://imgur.com/nn4dCHF 当前结果：https://imgur.com/0gHrlJu

无法打印返回的div

0 个答案: