Je travaille dans ReactJS et j'ai une base de données sur Firebase appelée posts en tant que collection d'objets. J'essaie d'itérer dans les objets de la base de données et de renvoyer un composant avec chacun attribué à l'une des clés uniques que Firebase crée pour les objets en tant qu'accessoires.

Comme exemple de résultat de ce que j'essaie de réaliser:

enter image description here

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

...etc. Quelqu'un peut-il m'aider à parcourir les données Firebase et à attribuer les clés à mes composants React?

Voici le code actuel que j'utilise pour cela:

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>
                );
            } );
        }
0
Matt Laszcz 15 janv. 2021 à 04:30

2 réponses

Meilleure réponse

Je pense que vous cherchez:

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

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

this.setState( { posts: updatedPosts } );
1
Frank van Puffelen 15 janv. 2021 à 01:58

Utilisez 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>
                );
            } );
        }
0
Pushkin 15 janv. 2021 à 01:57
65729270