Невозможно отобразить массив значений (компонент React)
Я создаю тестовое приложение, чтобы узнать больше о React, и я сделал вызов API, который получает огромный объект JSON.
Я смог разбить этот json на части, которые мне нужны, и теперь у меня есть 10 массивов по 3 реквизита в каждом. Я могу отправить эти 10 массивов в 3 реквизита другому компоненту, который должен использовать эти 3 реквизита 10 раз и визуализировать каждый из них по div class Card.
Я могу console.info(this.props), и он показывает 10 разных массивов с 3 реквизитами в каждом, однако я не могу создать один и тот же элемент 10 раз .. Я пробовал использовать map (), но поскольку мой массив изначально не определен, map () также не может работать должным образом . Есть ли что-то вроде * ngFor в Angular?
Как лучше всего это сделать?
*РЕДАКТИРОВАТЬ Вот еще код, ребята. Извините, все еще нуби здесь ..
ОШИБКА: this.props.map не является функцией
return(
<div>
{this.props.map((data,i)=>{
return(
<li key = {i}>{data.likes}</li>
);
* РЕДАКТИРОВАТЬ 2 Так вот, я пробовал запустить функцию карты с условием if, но код по-прежнему ломается в тот момент, когда условие становится истинным.
render() {
if (this.props.url !== undefined){
this.props.map((data,i) =>{
return <li key = {i}>{data.likes}</li>
})
}
Мой метод состояния:
state = {
userId: undefined,
likes: undefined,
url: undefined
}
и я устанавливаю свои значения для каждого потока данных следующим образом:
const pics = await fetch(`${base_url}?key=${api_key}&q=${query}
&img_type=photo&per_page=12`).then(response => {
return response.json();
})
pics.hits.map((data) =>{
return this.setState({
userId: data.user_id,
likes: data.likes,
url: data.webformatURL
})
})
Вы до сих пор не показали нам, как вы настраиваете props, что действительно важно. Еще раз: обновите свой вопрос, добавив минимальный воспроизводимый пример, демонстрирующий проблему, в идеале работоспособный, используя Stack Snippets (кнопка панели инструментов [<>]). Фрагменты стека поддерживают React, включая JSX; вот как это сделать.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Имея небольшую информацию, которую вы предоставили, я предполагаю, что код в map () не работает, когда вы пытаетесь использовать его с неопределенным значением. Попробуйте добавить условную проверку для рендеринга
{props && props.map ([КОД ПРЕДСТАВЛЕНИЯ ЗДЕСЬ])}
Вы можете просто сделать простой оператор if, чтобы проверить, не является ли массив неопределенным, а затем передать его в функцию сопоставления.
Другой вариант - установить defaultProps для пустого массива.
MyComponent.defaultProps = {
arrProp: []
};
Я сделал, но это тоже не работает .. Также сначала попробовал пустую строку.
this.props не будет иметь map, это не массив. Это объект со свойством для каждого свойства, переданного вашему компоненту. Например:
<YourComponent foo = "bar"/>
... будет this.props.foo со значением "bar".
Итак, если вы передаете массив своему компоненту, например:
<YourComponent theArrayProperty = {[{likes: 42},{likes:27}]} />
... тогда вам нужно имя этого свойства:
return (
<div>
{this.props.theArrayProperty.map((data,i) => {
return (
<li key = {i}>{data.likes}</li>
);
})}
</div>
);
Боковое примечание: вместо этого вы можете использовать краткую стрелочную функцию для обратного вызова map:
return (
<div>
{this.props.theArrayProperty.map((data,i) => <li key = {i}>{data.likes}</li>)}
</div>
);
... и нет необходимости в (), если вы поместите открывающий тег в строку с return (вы не можете отказаться от (, если он находится на следующей строке, но вы, вероятно, знали это):
return <div>
{this.props.theArrayProperty.map((data,i) => <li key = {i}>{data.likes}</li>)}
</div>;
... но это вопрос стиля.
Да, вы правы, это была глупая ошибка, но я все еще не могу заставить эту функцию работать даже со свойством Array .. Я получаю сообщение TypeError о том, что this.props.likes.map не является функцией.
@YashankVarshney - В третий раз: обновите свой вопрос, добавив в свой вопрос минимальный воспроизводимый пример, демонстрирующий проблему, в идеале работоспособный с использованием фрагментов стека (кнопка панели инструментов [<>]). Фрагменты стека поддерживают React, включая JSX; вот как это сделать.
Привет! Пожалуйста, возьмите тур, осмотритесь и прочитайте центр помощи, в частности Как мне задать хороший вопрос?. Мы не можем помочь вам с кодом, который мы не видим. Обновите свой вопрос, добавив минимальный воспроизводимый пример, демонстрирующий проблему, в идеале работоспособный, используя Stack Snippets (кнопка панели инструментов
[<>]). Фрагменты стека поддерживают React, включая JSX; вот как это сделать.