CODEWITHSUNDEEP
javascriptreactjs
Arasto
Arasto

Reputation: 491

Console.log() shows undefined before getting data

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 Console.log()

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.

Upvotes: 0

Views: 875

Answers (3)

Kishan Jaiswal
Kishan Jaiswal

Reputation: 664

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

Upvotes: 0

D Mishra
D Mishra

Reputation: 1578

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: []
 }

Upvotes: 0

claud.io
claud.io

Reputation: 1953

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

Upvotes: 0

Related Questions