在获取数据之前，Console.log（）显示未定义

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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