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始终为null。在我的渲染函数中，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);
    }
  }

使用传单并需要更新组件。如何更新构造函数中的值？

1 个答案: