如何渲染選定對象的數據？

Question

目前正在嘗試學習與 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>
    )
  }

你能告訴我我做錯了什么以及怎么做嗎？

Answer 1

您的示例中缺少一個部分，即您的路由器。 首先，您需要向路由器添加一條新路由。

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

這是您在創建的渲染方法中的鏈接標簽中告訴路由器您想要去的路由：

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

我假設您轉到該鏈接時要呈現的組件是您在上面的 ViewPost.js 示例中編寫的代碼。 如果您在路由器文件中將此組件作為ViewPost導入，它現在應該可以工作了。

單擊該鏈接，它將加載該組件。

接下來，在組件內部，您要調用與您在 URL 中看到的鍵關聯的數據。 從您使用的 URL 中獲取鍵值this.props.match.params.postId 。

現在您可以訪問鍵值，您可以在 componentDidMount 中進行常規的 firebase 調用：

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

我希望這是有道理的。 首先創建路由，然后從 URL 獲取鍵的值，然后使用鍵值在最終到達的組件內執行數據庫請求。