React-JS：在componentDidMount 中初始化一个全局变量，但在render 中没有得到它的值

debugcn 发表于 Dev

玛雅克·班萨尔

实际上，我正在 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);
  }

克里斯蒂安·穆斯卡卢

刚刚测试了这个并且它有效，但我不会使用全局变量。我会用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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。