javascript - 如何渲染所选对象的数据？

目前正在尝试学习如何使用firebase并不断遇到一些小障碍。

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

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的项目的相应数据。

这样的ViewPost.js文件：

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

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

最佳答案

您的示例中缺少一个路由器。首先，您需要向路由器添加新路由。

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

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

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

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

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

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

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

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

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

关于javascript - 如何渲染所选对象的数据？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48617671/