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

Question

我似乎有一个生命周期钩子问题，我似乎无法解决。

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>
    )
  }
}

这是我在渲染组件时的日志 https://i.gyazo.com/9dcf4d13b96cdd2c3527e36224df0004.png

它是未定义的，然后按照我的意愿检索数据，然后它再次未定义。

非常感谢有关导致此问题的原因的任何建议，谢谢。

Answer 1

替换这个：

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

有：

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
        })
    })
}

尝试在构造函数或componentDidMount（）中调用axios（不应使用componentWillMount）。 未定义的结果是由异步调用引起的。 看起来你有很多不受控制的渲染。 尝试添加一个shouldComponentUpdate函数或在PureComponent中转换您的组件

看看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>
    )
  }

看到这应该是这样的

Answer 3

你有初始状态

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

这里this.state.data是空数组，它没有subscriptionRevisionDTOS的定义，这就是为什么你得到this.state.data.subscriptionRevisionDTOS undefined 。

同时，您的async axios.get调用已完成， this.state.data已使用subscriptionRevisionDTOS更新。

一旦state更新，再次调用render（）并获得this.state.data.subscriptionRevisionDTOS的正确值。

所以线下肯定会有效。

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