Object downloaded from firebase do not behave normally
I have a situation like this :
I want to output an array of React components based on a firebase database request.
class component exends React.component
constructor ()
...
firebase.database().ref( '/properties/' ).once( 'value' ).then(
snapshot =>
var obj = snapshoot.val();
arr = Object.getOwnPropertyNames( obj )
.map( key => name: obj[key].name, ... );
this.setState( elements : arr );
);
...
...
render ()
return(
<Container>
this.state.elements.map(el => <Element ...el />);
</Container>
);
...
At runtime, I find that the <Container> component has an extra element. However, when I check the size of the array just before the render function, the size is correct.
I know that the problem comes from the firebase database request because when I replace the data by order data that do not come from the firebase database everything behaves correctly.
The most astonishing is that if build the array inside the firebase request function callback without using any data providing from the firebase database the same problem arise again.
Any idea?
javascript reactjs firebase firebase-realtime-database
edited Nov 15 '18 at 18:34
Frank van Puffelen
239k29382409
asked Nov 15 '18 at 18:21
Kervens VolcyKervens Volcy
1
add a comment |
I have a situation like this :
I want to output an array of React components based on a firebase database request.
class component exends React.component
constructor ()
...
firebase.database().ref( '/properties/' ).once( 'value' ).then(
snapshot =>
var obj = snapshoot.val();
arr = Object.getOwnPropertyNames( obj )
.map( key => name: obj[key].name, ... );
this.setState( elements : arr );
);
...
...
render ()
return(
<Container>
this.state.elements.map(el => <Element ...el />);
</Container>
);
...
At runtime, I find that the <Container> component has an extra element. However, when I check the size of the array just before the render function, the size is correct.
I know that the problem comes from the firebase database request because when I replace the data by order data that do not come from the firebase database everything behaves correctly.
The most astonishing is that if build the array inside the firebase request function callback without using any data providing from the firebase database the same problem arise again.
Any idea?
javascript reactjs firebase firebase-realtime-database
edited Nov 15 '18 at 18:34
Frank van Puffelen
239k29382409
asked Nov 15 '18 at 18:21
Kervens VolcyKervens Volcy
1
add a comment |
I have a situation like this :
I want to output an array of React components based on a firebase database request.
class component exends React.component
constructor ()
...
firebase.database().ref( '/properties/' ).once( 'value' ).then(
snapshot =>
var obj = snapshoot.val();
arr = Object.getOwnPropertyNames( obj )
.map( key => name: obj[key].name, ... );
this.setState( elements : arr );
);
...
...
render ()
return(
<Container>
this.state.elements.map(el => <Element ...el />);
</Container>
);
...
At runtime, I find that the <Container> component has an extra element. However, when I check the size of the array just before the render function, the size is correct.
I know that the problem comes from the firebase database request because when I replace the data by order data that do not come from the firebase database everything behaves correctly.
The most astonishing is that if build the array inside the firebase request function callback without using any data providing from the firebase database the same problem arise again.
Any idea?
javascript reactjs firebase firebase-realtime-database
edited Nov 15 '18 at 18:34
Frank van Puffelen
239k29382409
asked Nov 15 '18 at 18:21
Kervens VolcyKervens Volcy
1
I have a situation like this :
I want to output an array of React components based on a firebase database request.
class component exends React.component
constructor ()
...
firebase.database().ref( '/properties/' ).once( 'value' ).then(
snapshot =>
var obj = snapshoot.val();
arr = Object.getOwnPropertyNames( obj )
.map( key => name: obj[key].name, ... );
this.setState( elements : arr );
);
...
...
render ()
return(
<Container>
this.state.elements.map(el => <Element ...el />);
</Container>
);
...
At runtime, I find that the <Container> component has an extra element. However, when I check the size of the array just before the render function, the size is correct.
I know that the problem comes from the firebase database request because when I replace the data by order data that do not come from the firebase database everything behaves correctly.
The most astonishing is that if build the array inside the firebase request function callback without using any data providing from the firebase database the same problem arise again.
Any idea?
javascript reactjs firebase firebase-realtime-database
javascript reactjs firebase firebase-realtime-database
edited Nov 15 '18 at 18:34
Frank van Puffelen
239k29382409
asked Nov 15 '18 at 18:21
Kervens VolcyKervens Volcy
1
edited Nov 15 '18 at 18:34
Frank van Puffelen
239k29382409
asked Nov 15 '18 at 18:21
Kervens VolcyKervens Volcy
1
edited Nov 15 '18 at 18:34
Frank van Puffelen
239k29382409
edited Nov 15 '18 at 18:34
Frank van Puffelen
239k29382409
edited Nov 15 '18 at 18:34
Frank van Puffelen
239k29382409
239k29382409
asked Nov 15 '18 at 18:21
Kervens VolcyKervens Volcy
1
asked Nov 15 '18 at 18:21
Kervens VolcyKervens Volcy
1
asked Nov 15 '18 at 18:21
Kervens VolcyKervens Volcy
1
1
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I fact the extra element was added by a lower level SizeMe component. I don't know why the problem only occurs with the firebase objects, However, when I wrap the content of the SizeMe component with a <div> I got rid of the extra element at the start of the array.
answered Nov 16 '18 at 12:43
Kervens VolcyKervens Volcy
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53325678%2fobject-downloaded-from-firebase-do-not-behave-normally%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I fact the extra element was added by a lower level SizeMe component. I don't know why the problem only occurs with the firebase objects, However, when I wrap the content of the SizeMe component with a <div> I got rid of the extra element at the start of the array.
answered Nov 16 '18 at 12:43
Kervens VolcyKervens Volcy
1
add a comment |
I fact the extra element was added by a lower level SizeMe component. I don't know why the problem only occurs with the firebase objects, However, when I wrap the content of the SizeMe component with a <div> I got rid of the extra element at the start of the array.
answered Nov 16 '18 at 12:43
Kervens VolcyKervens Volcy
1
add a comment |
I fact the extra element was added by a lower level SizeMe component. I don't know why the problem only occurs with the firebase objects, However, when I wrap the content of the SizeMe component with a <div> I got rid of the extra element at the start of the array.
answered Nov 16 '18 at 12:43
Kervens VolcyKervens Volcy
1
I fact the extra element was added by a lower level SizeMe component. I don't know why the problem only occurs with the firebase objects, However, when I wrap the content of the SizeMe component with a <div> I got rid of the extra element at the start of the array.
answered Nov 16 '18 at 12:43
Kervens VolcyKervens Volcy
1
answered Nov 16 '18 at 12:43
Kervens VolcyKervens Volcy
1
answered Nov 16 '18 at 12:43
Kervens VolcyKervens Volcy
1
answered Nov 16 '18 at 12:43
Kervens VolcyKervens Volcy
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53325678%2fobject-downloaded-from-firebase-do-not-behave-normally%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
