使用React State时不会渲染Framework7搜索

问题描述

我正在尝试使用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中的页面元素以进行缓存和导航。因此，最好始终发送与页面相同的顶级组件。在您的代码中，您将有条件地发送两个不同的顶级组件。

请参见此fiddle中的示例。并随意使用它。我重新排列了您的代码：

1. 以便它发送相同的Page组件。
2. 具有正确的Searchbar和Navbar组件语法（如果我正确理解了您的期望）