Блог

Я работаю в ReactJS, и у меня есть база данных на Firebase, называемая posts, в виде набора объектов. Я пытаюсь выполнить итерацию по объектам базы данных и вернуть компонент, каждому из которых присвоен один из уникальных ключей, которые 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>
                );
            } );
        }
 

Я думаю, вы ищете:

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

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

this.setState( { posts: updatedPosts } );
 

Использование 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>
                );
            } );
        }