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

这是渲染组件时的 log 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: []
 }