在Reactjs中的render方法外部映射prop数据

Question

我想在函数中的render方法外部映射数据，并在render中返回它。但是我遇到映射错误，我不确定原因。

以下是应将数据映射到渲染器外部的函数：

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;
      }

在render方法中这样访问：

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);

错误屏幕截图：

Answer 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>
);