Сопоставление данных опоры вне метода рендеринга в Reactjs
Я хочу отобразить данные вне метода рендеринга в функции и вернуть их в рендеринге. Но я получаю ошибку отображения, я не уверен в причине.
Ниже приведена функция, которая должна отображать данные вне рендера:
filterItems = (itemList) => {
let result = [];
const { searchInput,alphabet } = this.state;
if (searchInput || alphabet) {
result = itemList.filter((element) => (element.name.charAt(0).toLowerCase() === alphabet.toLowerCase()) &&
this.elementContainsSearchString(searchInput, element));
} else {
result = itemList;
}
result = result.map((item)=> (<li>{item.name}<a href = "#"><img src = {item.image_url} className = "img-responsive" /></a></li>))
return result;
}
Доступ таким образом в методе рендеринга:
let celebrity = this.props.items.celebrity
const filteredList = this.filterItems(celebrity);
return (
<div className = "container no-padding">
<div className = "row celeb-grid">
<ul className = "no-padding celeb-items col-md-12">
{filteredList}
</ul>
</div>
</div>
);
Примечание. Я получаю данные, если выполняю console.info:
console.info (celebrity);
Снимок экрана с ошибкой:
Пожалуйста, прочтите При каких обстоятельствах я могу добавить к моему вопросу «срочно» или другие похожие фразы, чтобы получить более быстрые ответы? - вкратце, это не идеальный способ обращения к волонтерам и, вероятно, контрпродуктивно для получения ответов. Пожалуйста, воздержитесь от добавления этого к своим вопросам.
Пожалуйста, попробуйте использовать официальный CDN образа Stack Overflow на i.stack.imgur.com. Мы обнаружили, что другие сети CDN часто позволяют устаревшим изображениям истекать, что впоследствии потребует от волонтеров некоторой работы по очистке.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я предполагаю, что вы получаете список знаменитостей с конечной точки, возможно, в componentDidMount, но вы визуализируете компонент до загрузки этих данных. Это означает, что вы передаете undefined методу filterItems, и, независимо от результата условия, результатом будет undefined, и вы не можете map поверх чего-то, что не определено.
Чтобы решить эту проблему, вам нужно, чтобы ваш компонент отображал что-то, кроме списка, до загрузки данных.
let { celebrity } = this.props.items;
if (!celebrity && !celebrity.length) return <div />
return (
<div className = "container no-padding">
<div className = "row celeb-grid">
<ul className = "no-padding celeb-items col-md-12">
{this.filterItems(celebrity)}
</ul>
</div>
</div>
);
Вы говорите, что видите содержимое
celebrity. Но это массив? Сделайтеconsole.infoизнутри методомfilterItems. Или еще лучше отлаживайте его шаг за шагом