Why when I try to withdraw items from Firebase does not work?

Hi all
Can't withdraw items from ferbasa. In AC displays, in reducer - output, but component is not.
Code :
componentDidMount() {
 const ideas = firebase.database().ref("items");
 let arr = [];
 ideas.on("value", snapshot => {
 let items = snapshot.val();
 for (let item in items) {
arr.push({
 id: item
 text: items[item].text
});
}
});
this.props.renderIdeas(arr);
 }


AC :
export renderIdeas function(ideas) {
 return {
 type: RENDER_IDEAS,
 payload: ideas
};
}


Reducer :
export default function(state = [], action) {
 switch (action.type) {
 case RENDER_IDEAS:
 return action.payload;
default:
 return state;
}
}


UPD:
It turns out all right, but I can't display the data console.log'ohms even.

Here is my code:

render() {
 var Items = this.props.ideas;
 console.log(Items); //this prints fine
 for (var key in Items) {
 console.log(key); //this is not working
}
}


The output looks like this: 5a2e42d63d792569224622.jpeg
June 10th 19 at 16:04
1 answer
June 10th 19 at 16:06
Solution
The code in componentDidUpdate not correct, correct it is:
componentDidMount() {
 const ideas = firebase.database().ref("items");
 let arr = [];
 ideas.on("value", snapshot => {
 let items = snapshot.val();
 for (let item in items) {
arr.push({
 id: item
 text: items[item].text
});
}
this.props.renderIdeas(arr);
});

 }

The reason - asynchronously. You have it renderer component until the completion of colback on value. As a reference to the array you passed, then in the console it is displayed and updated, but the render went empty.

To iterate over arrays with for in is not recommended, can be broken the order of the elements. For objects as well better to use Object.keys(obj).map
Object.keys(obj).map(key => ({ id: key, text: obj[key].text }));


reducer for render to use is not necessary.
Thank you very much, the mistake was realized. The conclusion is fixed, I'll rewrite a Saga then.
I have a feeling that the project Reacte is 90% third-party API. This is a bug or a feature? :)
Database - Saga, for axov - axios, for the promise - thunk...
This is the main difference from Angular? - krista.Eichma commented on June 10th 19 at 16:09
do not need thunk. redux-saga enough.

Angular framework. React is a library.
IMHO, React better to the fact that it is a tool for one task with which he copes. And each added to the stack tool is a competitive solution and as soon as there is a better solution, it is no problem to use. For example StyledComponents.
Angular, as the processor trying to cover all the tasks of the frontend. Of course, he absorbed a bunch of compromise solutions and crutches. And indeed one of the main goals of Angular is a belt of corporate development. - Lenny.Botsfo commented on June 10th 19 at 16:12

Find more questions by tags ReactFirebase