Кто-либо использует Firefox XUL IDE? [закрытый]

Проблема в вашей renderPlaces функции. Ниже приведена упрощенная версия, чтобы было легче увидеть структуру.

renderPlaces = () => {
    this.state.places.map((place, i) => {
      if (place.type || place.type === "Recommended Places") {
          // When first selecting a location from the autocomplete search,
          // you execute this code
          return place.items.map((item, i) => (
              
                  {/* stuff to render a place */}
              
          ));
      }
      // When you select a filter, you hit this condition instead.
      return this.state.places.map((place, i) => (
          
              {/* stuff to render a place */}
          
       ));
    })
};

При первом выборе местоположения в this.state.places имеется одна запись с place.type «Рекомендуемых мест». Это place имеет массив items, который управляет рендерингом. Когда вы выбираете фильтр (например, «Рестораны»), places имеет несколько записей (10 в случае, который я видел), и ни одна из них не имеет type, поэтому он соответствует второму условию. Второй возврат выполняет вызов this.state.places.map, но вы все еще находитесь внутри внешнего вызова this.state.places.map, поэтому вы повторяете все места по одному разу для каждого места. Таким образом, дополнительные копии связаны не с количеством повторных рендеров, а с количеством мест. Если вы удалите второй this.state.places.map, как показано ниже, он будет работать нормально (по крайней мере, в этом аспекте).

renderPlaces = () => {
    this.state.places.map((place, i) => {
      if (place.type || place.type === "Recommended Places") {
          return place.items.map((item, i) => (
              
                  {/* stuff to render a place */}
              
          ));
      }
      return (
          
              {/* stuff to render a place */}
          
      );
    })
};