Блог

Я использую axios для получения данных с сервера и хранения полученных данных в массиве setCountries . Эта часть работает.

Код в codesandbox

Затем я просто хочу отобразить весь список названий стран, содержащихся в массиве, с помощью карты. Я совершаю здесь какую-то ошибку, потому что я получаю ошибку

Ошибка типа: setCountries.map не является функцией

Ошибка возникает из этой части кода. Откуда берется ошибка?

 const [countries, setCountries] = useState([])

const showCountries = () => {
 
  return (
    <div>
    <ul>
      {setCountries.map((country) => 
          <p key={country.alpha2Code}>{country.name}</p>
        )}
      </ul>
    </div>
  )
}



  return (
<div>

<div>
<h1>Countries</h1>

{showCountries()}
</div>

</div>
  );
}

export default App;

 

Вы используете функцию setCountries вместо массива countries

Исправленный:

  <ul>
    {countries.length > 0 amp;amp; countries.map((country) => 
      <p key={country.alpha2Code}>{country.name}</p>
    )}
  </ul>
 

Также используйте нулевые проверки, чтобы избежать других проблем

setCountries это функция для настройки country состояния. У него нет такой map функции. Решением здесь будет использование countries.map вместо:

 const showCountries = () => {
  return (
    <div>
      <ul>
        {countries.map((country) =>
        <p key={country.alpha2Code}>{country.name}</p>
        )}
      </ul>
    </div>
  )
}
 

setCountries-это функция, и именно поэтому вы не можете использовать карту. Если вы попробуете код, который я написал ниже, ваша проблема будет решена.

 {countries.map((country) => 
          <p key={country.alpha2Code}>{country.name}</p>
        )}