Функциональные значения компонентов и объектов
Я работаю над побочным проектом, и мне сложно распечатать значения объектов.
Мой макет кода выглядит следующим образом:
компонент на основе классов
this.state = {
itemDetails: []
};
axios.get(`${ROOT_URL}/${itemId}?${API_KEY}`).then(res => {
console.info(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>
}
Что предназначено для возврата значения original_title (Aquaman), однако я получаю сообщение об ошибке «TypeError: невозможно прочитать свойство original_title со значением null»
Любая помощь будет оценена
Я все еще изучаю JS, поэтому временами я немного теряюсь, я удалил функцию карты, но все еще не уверен в синтаксисе ... если не так уж много проблем, не могли бы вы опубликовать решение?
Что вы ожидаете от HTML для вывода функции MovieDetails?
@dotconnor пока только original_title, остальное я могу разобрать
Разве это не должно быть Object.keys, а не Object.values для массива ключей?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Следующего должно хватить только для показа заголовка.
const MovieDetails = (props) => {
const {itemDetails} = props;
return (
<div className='item-details'>
<a href='#t' className='item-name'>{itemDetails.original_title}</a>
</div>
);
}
Вы были на 4 секунды быстрее! Но вы также всегда должны объяснять решение, а не только почтовый индекс.
Я проголосовал за, так что вам не грустно, что OP выбрал мой ответ!
Из ваших комментариев я понял, что вы пытаетесь достичь всего этого кода:
const MovieDetails = (props) => {
return <div className='item-details'>
<div>
<a href='#t' className='item-name'>{props.itemDetails.original_title}</a>
</div>
</div>
}
По неизвестным причинам у вас там был избыточный и неправильный код. Я просто удалил его и переместил div с заголовком из цикла.
Спасибо, чувак, я в основном возился с кодом из других компонентов, которые достигли того же самого, хотя это было несколько объектов в массиве
@invrt Да, я сомневался, представляют ли данные json массив объектов или просто объект, тогда я посмотрел на URL-адрес ${ROOT_URL}/${itemId} и сделал вывод, что это последний случай!
Почему вы используете
Object.values(props.itemDetails)и повторяете его? Судя по тому, как это выглядит в вашей карте, функцияrбольшую часть времени будет строкой. Вам следует просто полностью удалить функцию карты и напрямую использоватьprops.itemDetails.original_title.