My array is not empty but array.length returns 0

Question

This is a really strange issue I've been trying to debug today; When the component mounts I'm getting the notifications to display them like this

  componentDidMount() {
    this.setState(
      {
        notifications: this.props.notifications,
      }
    );
  }

And then I tried to console log the notifications by adding this

  componentDidMount() {
    this.setState(
      {
        notifications: this.props.notifications,
      },
      () => {
        console.log(this.state.notifications);
        console.log(this.state.notifications.length);
      }
    );
  }

And what I get is this!

first console.log()

[]
0: {title: "Success", text: "You have successfully created a new game!", destination: {…}, type: "GameCreated"}
length: 1
__proto__: Array(0)

second console.log()

Shouldn't the array length be 1 instead of 0? I do have an element in that array. Also when I try to get the first value to that array it returns undefined.

Thanks for taking the time to read this and help out!

useState is async in nature. So if you try to access it before it sets the state, it is gonna give error — Sarthak Aggarwal
– Sarthak Aggarwal, Commented Apr 7, 2020 at 13:36
Please edit your question by replacing the screenshot with text (copy & paste). Not only do links die, but it poses problems for the visually impaired. — RamblinRose
– RamblinRose, Commented Apr 7, 2020 at 13:37

255kb - Mockoon · Accepted Answer · 2020-04-07 13:42:00Z

3

When you output an object with console.log its state may evolve and you are not necessarily seeing the state of this object at the time console.log was called but only at the time it was expanded in the console view. Which is not the case with primitives. Most probable scenario: when calling console.log the array was empty, with a length of 0. When you expand the Array log in the console view you will see it populated even if it was not at the time it was logged.

edited Apr 7, 2020 at 13:42

answered Apr 7, 2020 at 13:37

255kb - Mockoon

6,9922 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrew Ault Over a year ago

to verify this, you can change the line to console.log([ ...this.state.notifications ]), so that the logged object will not be mutated before you're able to check it

Abderrahmen Mhemed Over a year ago

thats actually very true, i did change my console log with what you mentioned and it returns an empty array as well. Thanks!

HermitCrab · Accepted Answer · 2020-04-07 13:44:31Z

0

I did the same test and it works correctly on my computer, it logs length as 1. Maybe there is something else in your code that is causing a side effect

answered Apr 7, 2020 at 13:44

HermitCrab

3,2641 gold badge14 silver badges10 bronze badges

Comments

Diamond · Accepted Answer · 2020-04-07 13:49:19Z

0

In your browser, console.log is working as an async function.

Check this question: Is Chrome's JavaScript console lazy about evaluating arrays?

To avoid this, you can use JOSN.parse( JSON.stringify(MutableData) ) like below;

componentDidMount() {
    this.setState(
      {
        notifications: this.props.notifications,
      },
      () => {
        console.log(JSON.parse(JSON.stringify(this.state.notifications)));
        console.log(this.state.notifications.length);
      }
    );
  }

answered Apr 7, 2020 at 13:49

Diamond

3,4905 gold badges21 silver badges43 bronze badges

Collectives™ on Stack Overflow

My array is not empty but array.length returns 0

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related