javascript - React中的过滤列表

我正在使用Flux + React Router + Firebase在React中创建一个基本博客。我在尝试撰写一篇博客文章时遇到麻烦。当我单击单个帖子的链接时，我尝试从所有帖子列表中过滤掉所有其他帖子，并仅显示我的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，因为我不断收到错误


  invariant.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>
}