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:
<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>
);
} );
}
2 réponses
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 } );
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>
);
} );
}
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.