Функциональный компонент и итерация объекта

Question

Мне нужна помощь с итерацией объекта, обычно я могу просто пройтись по массиву, но раньше я не имел дело ни с одним объектом.

В моем компоненте, основанном на классе, у меня есть

this.state = {
  itemDetails: []
};

axios.get(`${ROOT_URL}/${itemId}?${API_KEY}`).then(res => {
  console.log(res.data);
  this.setState({ itemDetails: res.data })
});

Это возвращает данные JSON, которые выглядят как

И у меня есть функциональный компонент, похожий на этот

const MovieDetails = (props) => {
  const arrayofKey = Object.keys(props.itemDetails).map((r) => {
    <li
      key={r.id} >
      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
      <a href='#t' className='search-results-name'>{r.name}</a>
      <a href='#t' className='search-results-title'>{r.title}</a>
    </li>
  })
  return <ul className='search-results'>{arrayofKey}</ul>
}

В настоящее время я получаю сообщение об ошибке:

Ожидается присваивание или вызов функции, и вместо этого он видит выражение.(без неиспользованных выражений)

Я просто хочу отреагировать, чтобы отобразить нужные мне данные, имя, название и т. д.

Answer 1

У вас есть небольшая ошибка в вашей функции карты:

.map((r) =>{
    <li
      key={r.id} >
      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
      <a href='#t' className='search-results-name'>{r.name}</a>
      <a href='#t' className='search-results-title'>{r.title}</a>
    </li>
  })

Здесь вы объявили функцию (r) => {, которая ничего не возвращает.

Вместо этого используйте:

.map((r) =>(
    <li
      key={r.id} >
      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
      <a href='#t' className='search-results-name'>{r.name}</a>
      <a href='#t' className='search-results-title'>{r.title}</a>
    </li>
  ))

Это сокращение от «и вернуть этот объект».

Answer 2

Изменение

.map((r) => { ... }) to .map((r) => ( ... ))

Answer 3

Будьте осторожны с функциями стрелок.В отличие от других языков, последнее выражение в блоке кода не возвращается автоматически.Измените

const arrayofKey = Object.keys(props.itemDetails).map((r) => {
  <li
    key={r.id} >
    <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
    <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
    <a href='#t' className='search-results-name'>{r.name}</a>
    <a href='#t' className='search-results-title'>{r.title}</a>
  </li>
})

... на:

const arrayofKey = Object.keys(props.itemDetails).map((r) => (
  <li
    key={r.id} >
    <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
    <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
    <a href='#t' className='search-results-name'>{r.name}</a>
    <a href='#t' className='search-results-title'>{r.title}</a>
  </li>
))

Второй имеет выражение в правой части функции стрелки.Первый имеет блок операторов, в котором отсутствует возврат.Кроме того, вы можете добавить return перед выражением <li/>.