React中的筛选列表
Filtering List in React
我正在react中使用Flux+react Router+Firebase创建一个基本博客。我在尝试渲染一篇博客文章时遇到了问题。当我点击一篇帖子的链接时,我会尝试从所有帖子的列表中筛选出所有其他帖子,并只显示我的firebase数据库中的一篇帖子。
我试图通过将firebase条目的键与url参数匹配来实现这一点,比如if (this.props.routeParams.key===key)
。我真的不知道我必须做些什么才能做到这一点。欢迎提出任何建议。
下面是Blogger.jsx,我允许用户在这个页面上创建一篇博客文章,然后在博客文章下面,我显示所有博客文章的标题列表。
import AltContainer from 'alt-container';
import React from 'react';
import { Link } from 'react-router';
import List from './List.jsx'
import Firebase from 'firebase'
import BlogStore from '../stores/BlogStore'
import BlogActions from '../actions/BlogActions';
const rootURL = 'https://incandescent-fire-6143.firebaseio.com/';
export default class Blogger extends React.Component {
constructor(props) {
super(props);
BlogStore.getState();
BlogStore.mountFirebase();
{console.log(this.props.location.query)}
};
componentDidMount() {
BlogStore.listen((state) => {
this.setState(state)
})
this.firebaseRef = new Firebase(rootURL + 'items/');
}
componentWillMount() {
BlogStore.unlisten((state) => {
this.setState(state)
})
}
renderList = (key) => {
return (
<Link to={`blogshow/${key}`}> <List key={key} blog={this.state.blog[key]} /> </Link>
)
}
handleInputChange = () => {
BlogStore.setState({
title: this.refs.title.value,
text: this.refs.text.value});
}
handleClick = () => {
BlogStore.handleClick();
}
render() {
return (
<div>
<div className="row panel panel-default">
<div className="col-md-8 col-md-offset-2">
<h2>
Create a New Blog Post
</h2>
</div>
</div>
<h2>Blog Title</h2>
<div className="input-group">
<input
ref="title"
value={BlogStore.state.title}
onChange = {this.handleInputChange}
type="text"
className="form-control"/>
<span className="input-group-btn">
</span>
</div>
<h2>Blog Entry</h2>
<div className="input-group">
<textarea
ref="text"
value={BlogStore.state.text}
onChange = {this.handleInputChange}
type="text"
className="form-control"/>
</div>
<div className="blog-submit input-group-btn">
<button onClick={this.handleClick}
className="btn btn-default" type="button">
Publish Blog Post
</button>
</div>
{/*<List blog={this.state.blog} />*/}
{Object.keys(BlogStore.state.blog)
.map(this.renderList)}
</div>
);
}
}
当用户点击一个链接到一篇博客文章时,他们应该被传送到一个只显示该博客文章的页面。我把这个组件叫做BlogShow。我无法让BlogShow呈现,因为我一直在获取错误
不变量.js?4599:45未捕获的不变冲突:BlogShow.render():A必须返回有效的React元素(或null)。你可能已经回来了未定义、数组或其他无效对象。
这是BlogShow.jsx:
import AltContainer from 'alt-container';
import React from 'react';
import { Link } from 'react-router';
import Blogger from './Blogger'
import List from './List'
const rootURL = 'https://incandescent-fire-6143.firebaseio.com/';
import BlogStore from '../stores/BlogStore'
import BlogActions from '../actions/BlogActions';
export default class BlogShow extends React.Component {
constructor(props) {
super(props);
{console.log(this.props.routeParams.key)}
this.filterList = this.filterList.bind(this);
}
filterList(key) {
if (this.props.routeParams.key===key) {
return (<List key={key} blog={BlogStore.state.blog[key]} />)
}
}
render() {
<div> {Object.keys(BlogStore.state.blog).map(this.filterList)} </div>
}
}
您收到该错误是因为组件BlogShow
没有返回任何内容。
render() {
<div> {Object.keys(BlogStore.state.blog).map(this.filterList)} </div>
}
应为:
render() {
return <div> {Object.keys(BlogStore.state.blog).map(this.filterList)} </div>
}
我根本不熟悉React.js,但我熟悉纯js数组。要从数组中删除元素,应该使用.filter()
,然后可以映射这些项。
类似这样的东西:
filterList(key) {
return this.props.routeParams.key === key; // true if the item should stay in the list
}
mapList(key) {
return <List key={key} blog={BlogStore.state.blog[key]} />;
}
render() {
return <div> {Object.keys(BlogStore.state.blog).filter(this.filterList).map(this.mapList)} </div>;
}
相关文章:
- 使用下拉列表筛选列表(ul>li)
- 需要Jquery列表筛选帮助
- React中的筛选列表
- 在本地存储中选中复选框,但在加载时也要筛选列表
- 根据文本框中键入的文本筛选单选按钮列表
- 使用 JQuery 复选框筛选项目列表
- 无法使用Angular.js从列表中正确筛选数据
- 控制器中的筛选列表没有'不起作用
- 我们可以将控制器中的JSON数据(MM/DD/YYYY格式)与今天的's日期,并在数组中显示筛选列表
- 如何使用搜索筛选器初始化列表视图
- 如何根据其他下拉列表中的选择筛选下拉结果
- 在文本框中键入字母的筛选器单选按钮列表
- 如何从交叉筛选器实例中获取维度列表
- 使用日期将所有下拉列表筛选为下拉列表
- 使用日期将下拉列表筛选为下拉列表
- 将特殊字符折叠添加到列表筛选器
- 使用所需键值的列表筛选对象数组
- 基于第一选择列表筛选第二选择列表
- 用这种方式创建列表筛选器方法不好吗?
- JQuery列表筛选器无法使用错误的字符