javascript - 如何使用 ID/ key (使用 React)从 Firebase 检索和呈现数据？

Question

我正在尝试从 Firebase 服务器访问数据，然后继续打开对象的 View 页面。我认为我的路由确实有效。

我希望点击的帖子链接的索引组件是这样的:

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 工作。我也将 View 组件导入其中。

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 自动生成的 key 添加到链接中，从而将其呈现在新页面中。

附言。我的数据库是这样导出的

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