Question

我正在尝试从Firebase服务器访问数据，然后继续打开该对象的视图页面。我认为我的路由工作正确。

我希望点击的帖子链接的索引组件是：

renderPosts() {
  return _.map(this.state.posts, (post, key) => {
    return (
      <div key={key} className="thumbnail">
        <h2>
          <Link to="/view/posts/{post}">
            {post.title}
          </Link>
        </h2>
        <p>{post.body}</p>
      </div>
    );

  });
}

我试图链接到帖子，因为我认为它的工作基于用于构建该功能的componentDidMount。我也将视图组件导入其中。

app.js页面如下：

      <BrowserRouter>
        <div>
          <div>
            <Nav/>
          </div>
          <Switch>

            <Route path='/' exact component={List}/>
            <Route path='/new' component={NewPost}/>
            <Route path='/view' component={View}/>


          </Switch>
        </div>
      </BrowserRouter> 
      </div>

    );
  }
}

view.js页面如下：

    componentWillMount(){

    let postRef = database().ref('posts').orderByKey().limitToLast(100);
    postRef.on('value', snapshot => {

      let post = { title: snapshot.title, id: snapshot.key };
      this.setState({ posts: [post].concat(this.state.posts) });
    });
    console.log(postRef);
  }

  }

  render() {


    return (
      <div >

      </div>

    );
  }
}

对不起。它现在有点裸露，因为我删除了我尝试过的所有内容。我用了几篇文章和视频来试图解决它，但没有任何效果。我用于索引页面的原始生命周期方法和构造函数是：

constructor(props){
    super(props);
    this.state = {
      title: '',
      body: '',
      posts:{}
    };
    this.onInputChange = this.onInputChange.bind(this);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
  }

和

  componentDidMount(){
    database.on('value', snapshot => {
      this.setState({
        posts: snapshot.val()
      });

    });
  }

对不起，我知道要通过很多工作，但我认为应该涵盖一些可能有用的东西。但总结一下：我的问题是如何从数据库中检索帖子，然后添加Firebase自动对链接进行的密钥，从而将其呈现在新页面中。

聚苯乙烯。我的数据库导出为

export const database = firebase.database().ref('/posts’);

Answer 1

我不明白这个问题，但听起来post键包含您想要链接的值。如果是这样的话，那么试试......

renderPosts(){
    return Object.keys(this.state.posts).map((post, index)=>(
        <div key={index} className="thumbnail">
        <h2>
          <Link to={`/view/posts/${post}`}>
            {this.state.posts[post].title}
          </Link>
        </h2>
        <p>{this.state.posts[post].body}</p>
        </div>
      )}
    );

然后你应该能够在你的渲染方法中调用你的renderPosts函数。

render() {
    return (
      <div >
       {renderPosts()}
      </div>
    );
  }

如果你正在调用firebase，那么获取帖子数据可能需要一些时间，因此只有在帖子数据出现时才调用render方法。

render() {
        return (
          <div >
           {this.state.posts && renderPosts()}
          </div>
        );
      }

如何使用ID / Key（使用React）从Firebase检索和渲染数据？

1 个答案: