如何渲染所选对象中的数据? [英] How do I render data from selected object?

问题描述

当前正在尝试学习如何使用Firebase并不断遇到一些小障碍.

Currently trying to learn react with firebase and keep getting some minor roadblocks.

到目前为止，我正在尝试在新页面中呈现所选项目中的数据.索引页面包含以下内容:

As of now, I am trying to render the data from a selected item in a new page. The index page contains the following:

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>
      ));
}

render() {
   return (
      <div>
        <div>
          {this.renderPosts()}
        </div>
        <View/>
      </div>
   )
}

如您所见，它将帖子的ID附加到链接中，所以我现在要做的是回到firebase并在新页面中单独渲染具有该ID的项目的相应数据.

As you can see it appends the ID of that post into the link so what I want to do now is to reach back into firebase and render the corresponding data of the item with that ID alone in a new page.

这样的ViewPost.js文件:

The ViewPost.js file as so:

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

  componentDidMount(){
    database.on('value', snapshot => {
      this.setState({
        post: snapshot.val()
      });
      this.props.match.params.postId;
    });
  }

  render() {
    return (
      <div >
       {this.state.props.title}
      </div>
    )
  }

您能告诉我我做错了什么以及如何做吗?

Can you please show me what I’m doing wrong and how to do it?

推荐答案

示例中缺少路由器.首先，您需要向路由器添加新路由.

There a missing piece in your example, your router. First, you need to add a new route to the router.

 <Route path='/view/posts/:postId' component={ViewPost}/>

这是一条路线，然后您在创建的render方法中的链接标记中告诉要转到的路由器:

This is the route then you are telling the router you want to go to in the link tag in the render method you created:

<Link to={`/view/posts/${post}`}>

我假设您要转到该链接时要呈现的组件是您在上面的ViewPost.js示例中编写的代码.如果您在路由器文件中将此组件作为 ViewPost 导入，则它应该可以正常工作.

I am assuming the component you want to render when you go to that link is the code you wrote in ViewPost.js sample above. If you import this component as ViewPost in your router file it should work now.

单击链接，它将加载该组件.

Click on the link, and it will load up that component.

接下来，在组件内部，您要调用与您在URL中看到的键相关联的数据.从您使用 this.props.match.params.postId 的URL抓取键值.

Next, inside the component, you want to call the data associated with the key you see in the URL. The grab the key value form the URL you use this.props.match.params.postId.

现在您可以访问键值了，您可以在componentDidMount中进行常规的firebase调用:

Now that you have access to the key value you can do a regular firebase call in componentDidMount:

componentDidMount(){
    database
     .ref(`posts/${this.props.match.params.postId}`) 
     .on('value', snap => {
          this.setState({post: snapshot.val()});
     })
}

我希望这是有道理的.首先进行路由，然后从URL获取键的值，然后使用键值在最终要使用的组件内进行数据库请求.

I hope that made sense. First make a route, then get the value of the key from the URL, then use the key value to do a database request inside the component that you end up at.

这篇关于如何渲染所选对象中的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！