Блог

Я пытаюсь использовать компонент Searchbar и загружать данные из API, но похоже, что компонент вообще не работает, если он когда-либо отображался из заданного изменения состояния.

Вот репозиторий, который воспроизводит ошибку: https://github.com/fny/bugreports-framework7

Приведенный ниже код, например, вообще не отображает панель поиска, только список после нажатия кнопки переключения:

 export default class extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      loaded: false
    }
  }
  render() {

    if (this.state.loaded) {
      return <Page>
      <Navbar title="Dynamic Searchbar"  backLink="Back">
        <Subnavbar inner={false}>
          <Searchbar
            searchContainer=".search-list"
            searchIn=".item-title"
          ></Searchbar>
        </Subnavbar>
      </Navbar>
      <List className="searchbar-not-found">
        <ListItem title="Nothing found" />
      </List>
      <List className="search-list searchbar-found">
        <ListItem title="Acura" />
        <ListItem title="Audi" />
        <ListItem title="BMW" />
        <ListItem title="Cadillac " />
        <ListItem title="Chevrolet " />
        <ListItem title="Chrysler " />
        <ListItem title="Dodge " />
        <ListItem title="Ferrari " />
        <ListItem title="Ford " />
        <ListItem title="GMC " />
        <ListItem title="Honda" />
        <ListItem title="Hummer" />
        <ListItem title="Hyundai" />
      </List>
      </Page>
    }

    return <Page>
      <Button onClick={() => this.setState({loaded: true}) }>Load</Button>
    </Page>

  }
}
  

Если один и тот же список отображается независимо от this.set.state, он отображается так, как ожидалось:

 import React from 'react';
import { Page, Navbar, Block, BlockTitle, Subnavbar, Searchbar, List, ListItem } from 'framework7-react';

export default class extends React.Component {
  render() {
    return <Page>
      <Navbar title="Static Searchbar"  backLink="Back">
        <Subnavbar inner={false}>
          <Searchbar
            searchContainer=".search-list"
            searchIn=".item-title"
          ></Searchbar>
        </Subnavbar>
      </Navbar>
      <List className="searchbar-not-found">
        <ListItem title="Nothing found" />
      </List>
      <List className="search-list searchbar-found">
        <ListItem title="Acura" />
        <ListItem title="Audi" />
        <ListItem title="BMW" />
        <ListItem title="Cadillac " />
        <ListItem title="Chevrolet " />
        <ListItem title="Chrysler " />
        <ListItem title="Dodge " />
        <ListItem title="Ferrari " />
        <ListItem title="Ford " />
        <ListItem title="GMC " />
        <ListItem title="Honda" />
        <ListItem title="Hummer" />
        <ListItem title="Hyundai" />
      </List>
    </Page>
  }
}
  

В Framework7 есть некоторый код под капотом, который извлекает элементы страницы в dom для целей кэширования и навигации. Поэтому лучше всегда отправлять один и тот же компонент верхнего уровня в качестве страницы. В вашем коде вы отправляете два разных компонента верхнего уровня условно.

Пожалуйста, посмотрите мой пример в этой скрипке. И не стесняйтесь играть с ним. Я перестроил ваш код:

1. Так что он отправляет тот же Page компонент.
2. Имеет правильный Searchbar Navbar синтаксис и компоненты (если я правильно понял, чего вы ожидали)