Console.log() shows undefined before getting data

console log result undefined
console log returns undefined
console.log undefined chrome
why does console log always return undefined
console log undefined value
common challenges with javascript
chrome console function undefined
console log not defined

I seem to have a lifecycle hook issue that I can't seem to solve.

export default class EditRevision extends Component {

  state = {
    data: [],
    customColumns: []
  }

  componentWillMount = () => {
      axios.get('http://localhost:8080/lagbevakning/revision/subscriptions?id=' + (this.props.match.params.id)).then(response => {
        this.setState({
          data: response.data,
          loading: false
        })
      })
  }

  render() {
    /* THIS IS THE CONSOLE.LOG() I AM REFERRING TO */
    console.log(this.state.data.subscriptionRevisionDTOS) 
    return (  
      <div></div>
    )
  }
}

And this is my log upon rendering the component https://i.gyazo.com/9dcf4d13b96cdd2c3527e36224df0004.png

It is undefined, then retrieves the data as i desire it to, then it gets undefined again.

Any suggestions on what causes this issue is much appreciated, thank you.

Replace this:

componentWillMount = () => {
    axios.get('http://localhost:8080/lagbevakning/revision/subscriptions?id=' + (this.props.match.params.id)).then(response => {
        this.setState({
            data: response.data,
            loading: false
        })
    })

with:

constructor(props){
    super(props)
    this.state = {
        data: [],
        customColumns: []
    }

    axios.get('http://localhost:8080/lagbevakning/revision/subscriptions?id=' + (this.props.match.params.id)).then(response => {
        this.setState({
            data: response.data,
            loading: false
        })
    })
}

try to call axios in constructor or componentDidMount() (componentWillMount should not be used). the undefined result is caused by the async call. Looks like you have a lot of uncontrolled renders. try to add a shouldComponentUpdate function or convert your component in a PureComponent

Take a look at https://reactjs.org/docs/react-component.html

Why does console.log(myBalance) print undefined?, when I was expecting: undefined Are functions not executable in console.log ? bankBalance); // create a new variable myBalance that calls getBalance() var� also, the number of undefined I get depends on how many times the table has been reinitialized. 2 reinitialization means I get 2 undefined before getting the correct data. been trying to figure out whats going on here for quite a while, any helps would be greatly appreciated!

You have init the state with

state = {
    data: [],
    customColumns: []
 }

Here this.state.data is empty array which did not have definition of subscriptionRevisionDTOS that is why you are getting this.state.data.subscriptionRevisionDTOS undefined.

Meanwhile, your asyncaxios.get call is completed and this.state.data is updated with subscriptionRevisionDTOS.

As soon as state is updated render() called again and you are getting the proper value of this.state.data.subscriptionRevisionDTOS.

So below line will surely work.

state = {
   data:{subscriptionRevisionDTOS:[]},
   customColumns: []
 }

Answers are correct, but console log is printing "Undefined" for the , When using an array with a for loop, use arrayName.length for the condition part. That way, when the new members are added or removed from the array, the for� Hello guys, I want to get some data when the row clicked so I implemented this function like in the example here but when I click on some rows I got undefined hers's my fucntion to get data :

export default class EditRevision extends Component {

  state = {
   data:{subscriptionRevisionDTOS:[]},
   customColumns: []
 }

 componentDidMount = () => {
  axios.get('http://localhost:8080/lagbevakning/revision/subscriptions?id=' + 
  (this.props.match.params.id)).then(response => {
    this.setState({
      data: response.data,
      loading: false
    })
  })

  render() {
    /* THIS IS THE CONSOLE.LOG() I AM REFERRING TO */
    console.log(this.state.data.subscriptionRevisionDTOS) 
    return (  
      <div></div>
    )
  }

see this it should be like this

The 10 Most Common Mistakes JavaScript Developers Make, If you guess that the console.log() call would either output undefined or throw Avoiding many common JavaScript mistakes will help when your JavaScript is� Why am I getting an undefined value or when I try to check the value of my variable after submitting text from an input? I have spent the last 3 hours trying to figure this out on my own, and I've finally hit a point where I'm absolutely stuck.

POST Request returns 'undefined' (But NO errors in logs), Okay, so when I send a POST request to /getenv, I am supposed to get the console.log(JSON.stringify(data)); // var dataa = JSON.stringify(data) It shows undefined although request.body.name returns Dear, which was our� Data types define what kind of data can be manipulated within a program. There are 8 primitive data types in JavaScript, here are the details about them.

Console, A Console class with methods such as console.log() , console.error() and ignoreErrors <boolean> Ignore errors when writing to the underlying streams. parsed as tabular data console.table(Symbol()); // Symbol() console.table( undefined); Prints: (stack trace will vary based on where trace is called) // Trace : Show me� Oh, yes. This part looked a bit crazy for me too, but I wasn't sure. In express middleware and routers are nearly the same. A Request moves linearly through them in order of declaration. It passed the router before body-parser.

undefined, The global undefined property represents the primitive value undefined. In modern browsers (JavaScript 1.8.5 / Firefox 4+), undefined is a (Even when this is not the case, avoid overriding it.) A logs "foo string" (function(undefined) { console.log(undefined, typeof Update compatibility data on GitHub� Definition and Usage. The console.log() method writes a message to the console. The console is useful for testing purposes. Tip: When testing this method, be sure to have the console view visible (press F12 to view the console).

Comments
  • because this.state.data.subscriptionRevisionDTOS is not defined in state ,on load data is empty so its showing undefined, please upload whole component code
  • You should also put the api call code in componentDidMount instead of willMount
  • The API response seems to be an object? But in your initial state, data is an empty array.
  • you should use componentDidMount instead of componentWillMount, 'case this is deprecated
  • um I think your this is out of reference, meaning i think using this inside the axios object refects to that object instead of an object of your required class. could you try consoling like console.log(this) inside the then function
  • Hi Kishan, i've tried this already and this gives me syntax error. console.log(this.state.data.subscriptionRevisionDTOS[0]) this is how it should be, but this also gives me syntax error because it gets back undefined.
  • console.log(this.state.data),console only this you will not get undefined , you will get empty array and once api gives you response your array will get updated