ReactJS：仅按全名过滤列表的呈现？

Question

我目前正在使用map() 函数呈现从 API 返回的数据列表，如下所示：

renderLocation() {
    return this.props.locations.map(location => {
      return (
        <div key={location.id}>
          <div className="location">
            <h1>
              {location.name}
              {location.airport_code}
            </h1>
            <div className="location-secondary-info">
              <span>
                <i className="material-icons">airplanemode_active</i>
                {location.description}
              </span>
            </div>
          </div>
        </div>
      );
    });
  }

我现在想过滤渲染，以便渲染的唯一locations 是那些具有正确name 字段值的那些。我的 API 数据如下所示：

如果locations.name 是实际有效的城市名称，我只希望呈现locations。

因此，例如，name 或 "Chicago O'Hare" 的位置将是有效的城市名称，应该显示。但是，不应呈现具有 name 或 "Chicago O'Hare A5C" 的位置，因为它的末尾有 A5C，这使其无效。

Answer 1

一种方法可能是使用正则表达式根据位置的name 字段上是否存在字母数字子字符串后缀来过滤位置，方法如下：

const filteredLocations = this.props.locations.filter(location => {
    return !location.name.match(/[A-Z0-9]+$/)
});

上面的逻辑基本上是说：

“过滤位置名称末尾没有字母数字单词的所有位置”。

可以通过以下方式将其集成到您的 renderLocation() 函数中：

renderLocation() {

    /* Filter locations with name that doesn't have alphanumeric suffix word   */
    const filteredLocations = this.props.locations.filter(location => {
        return !location.name.match(/[A-Z0-9]+$/)
    });

    /* Render only the filtered location with name Chicago O'Hare */ 
    return filteredLocations.map(location => {
      return (
        <div key={location.id}>
          <div className="location">
            <h1>
              {location.name}
              {location.airport_code}
            </h1>
            <div className="location-secondary-info">
              <span>
                <i className="material-icons">airplanemode_active</i>
                {location.description}
              </span>
            </div>
          </div>
        </div>
      );
   });
}

希望有帮助