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

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.values(props.itemDetails).map((r) => (
    <div>
      <a href='#t' className='item-name'>{r.original_title}</a>
    </div>
  ))
  return <div className='item-details'>{arrayofKey}</div>
}

, который предназначен для возврата значенияof original_title (Aquaman), однако я получаю сообщение об ошибке "Ошибка типа: невозможно прочитать свойство 'original_title' с нулевым значением"

Любая помощь будет оценена

Answer 1

Из ваших комментариев я понял, что вы пытаетесь достичь только этого кода:

const MovieDetails = (props) => {
  return <div className='item-details'>
    <div>
      <a href='#t' className='item-name'>{props.itemDetails.original_title}</a>
    </div>
  </div>
}

По некоторым неизвестным причинам у вас был избыточный и неправильный код.Я просто удалил его и переместил div с заголовком из цикла.

Answer 2

Для показа заголовка должно быть достаточно:

const MovieDetails = (props) => {
  const {itemDetails} = props; 
  return (
    <div className='item-details'>
      <a href='#t' className='item-name'>{itemDetails.original_title}</a>
    </div>
  );
}