使用小册子并需要更新组件。我怎样才能更新我的构造函数中的值？

Question

我在我的反应组件中使用了传单，我正在使用scriptLoading库来加载所有必需的脚本。

我在构造函数如下：

constructor(props) { 
    super(props); 
    this.map = null; 
    this.popup = null; 
    } 

我加载传单这样的：

componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) { 
    if (isScriptLoaded && !this.props.isScriptLoaded) { 
     if (isScriptLoadSucceed) { 
     this.map = L.map(this.refs.map); 

    /////// 
     this.popup = L.popup(); 
    /////// 

不过，我有我的类中的函数来处理一个onClickMap(e)和this.map和this.popup始终为空。在我的渲染功能中，this.map和this.popup不为空。

onClickMap(event) { 
    console.log('on click', this.popup, this.map); // both null 
    if (this.popup) { 
     this.popup 
     .setLatLng(event.latlng) 
     .setContent('You clicked the map at ' + event.latlng.toString()) 
     .openOn(this.map); 
    } 
    } 

如何正确更新构造函数值？

Answer 1

使用this.state在构造函数。

constructor(props) { 
    super(props); 
    this.state = { 
     map: null, 
     popup: null 
    } 
} 

在componentWillReceiveProps

并使用setState。

componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) { 
    if (isScriptLoaded && !this.props.isScriptLoaded) { 
     if (isScriptLoadSucceed) {   
     this.setState({ 
      map: L.map(this.refs.map), 
      popup: L.popup() 
     }); 
    /////// 

而且你可以从this.state得到它。

onClickMap(event) { 
    console.log('on click', this.state.popup, this.state.map); // both null 
    if (this.state.popup) { 
     this.state.popup 
     .setLatLng(event.latlng) 
     .setContent('You clicked the map at ' + event.latlng.toString()) 
     .openOn(this.state.map); 
    } 
    }