我正在使用 ReactJS，我在 Firebase 上有一个名为 posts 的数据库，它是对象的集合。我试图遍历数据库对象并返回一个组件，每个组件都分配有 Firebase 为对象创建的唯一键之一作为 props。

这是我试图实现的结果示例：

<Post
   key={-MQcz3BC4lbKnvFe8Jl}
   title={post.title}
   type={post.type}
   body={post.body}
   clicked={() => this.postAnswerHandler( post.id )}
    />

<Post
   key={-MQxVra23HwWb8ogRJZ}
   title={post.title}
   type={post.type}
   body={post.body}
   clicked={() => this.postAnswerHandler( post.id )}
    />

...等等。有人能帮我遍历 firebase 数据并将键分配给我的 React 组件吗？

这是我目前使用的代码：

class Posts extends Component {
    state = {
        posts: []
    }

    componentDidMount () {
   
        axios.get( 'https://blog-6d4da-default-rtdb.firebaseio.com/posts.json' )
            .then( response => {
                let posts = Object.values(response.data);
                let key = Object.keys(response.data);
            
                const updatedPosts = posts.map( post => {
                    
                    return {
                        ...post,
                        
                    }
                
                } );

                this.setState( { posts: updatedPosts } );
                
            } )
            .catch( error => {
                console.log( error );
                // this.setState({error: true});
            } );
    }

  

    render () {
        let posts = <p style={{ textAlign: 'center' }}>Something went wrong!</p>;
        if ( !this.state.error ) {
            posts = this.state.posts.map( (post) => {
                return (
                    
                    <Post
                        key={post.key}
                        title={post.title}
                        type={post.type}
                        body={post.body}
                        clicked={() => this.postAnswerHandler( post.id )}
                         />
                        
                    // </Link>
                );
            } );
        }