遍历 Firebase 数据库 object 并分配键以反应组件

Question

I am working in ReactJS and I have a database on Firebase called posts as a collection of objects. I am trying to iterate through the database objects and return a component with each assigned with one of the unique keys that firebase creates for the objects as props.

As a result example of what I am trying to achieve:

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

...and so on. Can anyone help with iterating through the firebase Data and assigning the keys to my React components?

Here is the current code I am using for this:

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

Answer 1

I think you're looking for:

let keys = Object.keys(response.data);

const updatedPosts = keys.map( key => {    
    return {
        key, ...response.data[key],
        
    }
} );

this.setState( { posts: updatedPosts } );

Answer 2

Use Object.entries()

 axios.get( 'https://blog-6d4da-default-rtdb.firebaseio.com/posts.json' )
            .then( response => {
            
               this.setState( { posts: response } );
                
            } )

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