react-js:初始化componentDidmount中的全局变量，但无法获得其渲染值

Question

实际上，我正在初始化componentdidmount中的一个变量，然后从那里打印其在控制台上的值。因此，在控制台中，我得到了变量的值，但是当我从渲染中打印变量的值时，我会得到"未定义"。

var data    //declaring a global variable
export default class Schemes extends React.Component{
  constructor(){
  super();
  this.response = response
  componentDidMount(){
    /* Some Computation*/
    if(localStorage.getItem('xyz')){
      data = response
    }
  }
  render(){
    console.log("In render", data);
  }

Answer 1

刚刚对此进行了测试，但我不会使用全局变量。我会使用state。

import React, { Component } from 'react'
var data = 'my data'
class Test extends Component {
    constructor(props) {
        super(props)
        this.response = 'my response'
    }
    componentWillMount() {
        localStorage.setItem('test', 'w00f')
        if (localStorage.getItem('test')) {
            data = this.response
        }
        data = this.response
    }
    render() {
        console.log(data) //my response
        return (
            <div></div>
        )
    }
}
export default Test

这是一个更好的版本，使用状态：

import React, { Component } from 'react'
class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: null,
            response: 'got reponse'
        }
    }
    componentWillMount() {
        localStorage.setItem('test', 'w00f')
        if (localStorage.getItem('test')) {
            this.setState({ data: this.state.response })
        }
    }
    render() {
        console.log(this.state.data) //got reponse
        return (
            <div></div>
        )
    }
}
export default Test