在 Reactjs 中的渲染方法之外映射道具数据答案

【问题标题】：Map prop data outside render method in Reactjs在 Reactjs 中的渲染方法之外映射道具数据
【发布时间】：2019-05-11 12:46:13
【问题描述】：

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

下面是应该将数据映射到渲染之外的函数：

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

错误截图：

【问题讨论】：

可以看到你说的celebrity的内容。但它是一个数组吗？从filterItems 方法内部执行console.log。或者更好的是逐步调试它
请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。
请尝试使用i.stack.imgur.com 的官方 Stack Overflow 图像 CDN。我们发现其他 CDN 经常会让旧图像过期，这将在以后给志愿者一些清理工作。

标签： javascript json reactjs ecmascript-6 redux

【解决方案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>
);

【讨论】：