遍历 Firebase 数据库对象并分配键以响应组件答案

【问题标题】：Iterating through Firebase database object and assining keys to react components遍历 Firebase 数据库对象并分配键以响应组件
【发布时间】：2021-01-15 01:30:25
【问题描述】：

我在 ReactJS 中工作，我在 Firebase 上有一个数据库，称为帖子作为对象的集合。我正在尝试遍历数据库对象并返回一个组件，每个组件都分配有firebase为对象创建的唯一键之一作为道具。

作为我想要实现的结果示例：

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

【问题讨论】：

标签： javascript reactjs firebase-realtime-database

【解决方案1】：

我想你正在寻找：

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

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

this.setState( { posts: updatedPosts } );

【讨论】：

【解决方案2】：

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

【讨论】：