Браузер для мобильных устройств chrome не отображает мои данные или результаты

Question

У меня есть следующий фрагмент кода React на моем веб-сайте, который показывает div результатов поиска, только если результаты поиска существуют. Бэкэнд ограничивает результаты поиска только 20 элементами одновременно, и каждый элемент представляет собой словарь, содержащий только три пары ключ-значение.

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

Есть ли что-то, связанное с высотой div или данными, отображаемыми для мобильного телефона Chrome? Кто-нибудь сталкивался с этим?

<div
  style={{
    height: 150,
    width: "100%",
    overflowY: "scroll",
    display: this.props.hasSearchResults ? "" : "None"
  }}
>
  {/* switch to a div */}
  {/* <List> */}
  {this.props.search_results.map((result, idx) => (
    <div>
      <IconButton
        size="small"
        edge="end"
        onClick={event => {
          this.handleMenuAdd(event, result);
        }}
        style={{height: "100%"}}
      >
        <AddIcon
          style={{margin: "auto"}}
          fontSize="small"
        />
      </IconButton>
      <Typography
        style={{verticalAlign: "bottom"}}
        noWrap={true}
        // display="block"
        variant="caption"
      >
        {result.name}
      </Typography>
      <Typography
        variant="caption"
        style={{marginLeft: 10}}
        noWrap={true}
      >
        {result.item_type}
      </Typography>
    </div>
  ))}
</div>

Answer 1

Спасибо всем за внимание и вклад. Проблема была на стороне сервера. Это просто не нижний регистр поискового запроса. В Chrome ввод автоматически вводился с заглавной буквы, а в Firefox - нет. Чувствую себя глупо, но оставлю это здесь, если кому-то еще понадобится это увидеть.