如何解决使用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中的示例。并随意使用它。我重新排列了您的代码:
- 以便它发送相同的
Page
组件。 - 具有正确的
Searchbar
和Navbar
组件语法(如果我正确理解了您的期望)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。