Сопоставьте данные реквизита вне метода рендеринга в Reactjs - PullRequest
0 голосов
/ 10 декабря 2018

Я хочу отобразить данные вне метода рендеринга в функции и вернуть их при рендеринге.Но я получаю ошибку отображения, я не уверен в причине.

Ниже приведена функция, которая должна отображать данные вне рендера:

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.log:

console.log (celebrity);

Снимок экрана ошибки:

Screenshot

1 Ответ

0 голосов
/ 10 декабря 2018

Я предполагаю, что вы выбираете список знаменитостей из конечной точки, возможно, из 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>
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...