console.log of element.children shows 0 length but has three entries when expanded later
When you log objects to the console, the object's current state is not snapshotted and displayed (as you might expect); instead, the console gets a live reference to the object. When you expand it in the console, you see its contents as of when you expand it, not as of when you logged it. More on that in this question and its answers.
So apparently your collections are empty when you do your logging, and then gain their elements later. You just want to make your code wait until the collections are populated. For instance, if you're doing this immediately when your script is run, consider putting the script at the end of the document, right before the closing </body>
tag.
The very subtle blue (i) icon next to the object has a tooltip that's useful; if you hover it you see:
It says "Object value at left was snapshotted when logged, value below was evaluated just now."
But generally: Rather than stumbling around in the dark with a console.log
torch, I suggest turning on the lights using the debugger built into your browser and/or IDE.
Array has records but showing array length 0 in console
This is related to Chrome dev tools. You see the little "i" in a blue square next to "[]"? If you hover it with your mouse, it says "value below was evaluated just now". It means that at the time you logged your array (which is actually a javascript Object), it was empty, but later Chrome detected a change, and updated the array in the console.
(And that is only if you expand it using the little arrow, you can see the array was empty at the time it was logged since it looks like this "[]", otherwise it would have looked like this "[{...}]").
Chrome updates object when you log them, but not simple values. Array.length is a number, so when you log it, it gives you its value (0), and if Array.length changes later, it will not update the console; but if you log it after the change (as with your timeout), it will log the more recent value.
Array is empty but not anymore when opened
The problem is here:
headers.map((conversation) =>
conversation.conversators.filter(async (conversator) => {
if (conversator !== user._id) {
let conv = await getUserById(conversator);
fetchedConversations.push(conv);
}
})
);
You are pushing after awaiting a promise, but let the code continue on.
Try this:
await Promise.all(headers.map((conversation) =>
Promise.all(conversation.conversators.filter(conversator=>conversator !== user._id)
.map(async (conversator) => {
let conv = await getUserById(conversator);
fetchedConversations.push(conv);
}));
));
Map returns the promises, then you use Promise.all to make them all into one promise and await it. There certainly is a better way to turn this out, but that should be enough to get you to understand what's happening.
i have an error about object manipulation
It happens because at first render you don't have an object in state and the error just stops the code execution.
Remember that useEffect is happens after the first render. listtokenbsc is a string initially (look at the default state value).
Probably, the result of console.log(listtokenbsc.baseCurrency) is what you have in listtokenbsc after a successful fetching (in that way error didn't happen).
So, you have a few options on how to fix that:
// 1
if (typeof listtokenbsc === 'object' && 'name' in listtokenbsc) {
console.log(listtokenbsc.name)
}
// 2
console.log(listtokenbsc?.baseCurrency?.name)
// 3
const [pricecontract, setPricecontract]= useState([{}])
console.log of element.children shows 0 length but has three entries when expanded later
When you log objects to the console, the object's current state is not snapshotted and displayed (as you might expect); instead, the console gets a live reference to the object. When you expand it in the console, you see its contents as of when you expand it, not as of when you logged it. More on that in this question and its answers.
So apparently your collections are empty when you do your logging, and then gain their elements later. You just want to make your code wait until the collections are populated. For instance, if you're doing this immediately when your script is run, consider putting the script at the end of the document, right before the closing </body>
tag.
The very subtle blue (i) icon next to the object has a tooltip that's useful; if you hover it you see:
It says "Object value at left was snapshotted when logged, value below was evaluated just now."
But generally: Rather than stumbling around in the dark with a console.log
torch, I suggest turning on the lights using the debugger built into your browser and/or IDE.
Related Topics
Maximum Call Stack Size Exceeded Error
How to Move an Element into Another Element
Navbar Dropdown (Collapse) Is Not Working in Bootstrap 5
Why Is the Value of My Input Always Empty If I Store It in a Variable
How to Autosize a Textarea Using Prototype
How to Add Line Breaks to an HTML Textarea
How to Cancel Form Submission in Submit Button Onclick Event
"Uncaught Typeerror: Illegal Invocation" in Chrome
Retrieve the Position (X,Y) of an HTML Element
Jquery Id Selector Works Only For the First Element
How to Programmatically Set the Value of a Select Box Element Using JavaScript
Best Way to Track Onchange As-You-Type in Input Type="Text"
How to Apply CSS to Half of a Character