使用傳單並需要更新組件。 如何更新構造函數中的值？

Question

我在我的react組件中使用傳單，並且正在使用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不為null。

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