SPFx React webpart onAfterPropertyPaneChangesApplied

Question

I have created simple web-part in react and spfx for sharepoint online. In this web-part

weather.tsx have all rendering and function of the web-part. In componentDidMount function I call external API function by passing parameter and setState which will render web-part with new values.

public componentDidMount() {
    this.getWeather(this.props.latitude, this.props.longitude, 'si').then((weatherForcast: IWeather) => {
      this.setState({
        weatherForcast: weatherForcast
      })
    })

    this.getLocation(this.props.latitude, this.props.longitude).then((location: ILocation) => {
      this.setState({
        Locations: location
      })
    })

  }

WeatherWebPart.ts have all property pane labels and field with its validation. I make this property pane non-reactive and added onAfterPropertyPaneChangesApplied but I don't know how to call those function in this web-part and change the state

My Repo

https://github.com/milindsaraswala/weather

I solved my issue by creating componentDidUpdate method with parameter interface of weather and checking old and new value if value mismatch then I will call getWeather and getLocation which will re-render component with new value. I don't know it correct way or not.

Please somebody can guide

Answer 1

I solved my issue by creating componentDidUpdate method with parameter interface of weather and checking old and new value if value mismatch then I will call getWeather and getLocation which will re-render component with new value.

public componentDidUpdate(prevProps: IWeatherProps, prevState: IWeatherStates) {
    let _units = this.props.units ? 'us' : 'si'
    if (this.props.latitude !== prevProps.latitude || this.props.longitude !== prevProps.longitude || this.props.units !== prevProps.units) {
      this.getWeather(this.props.latitude, this.props.longitude, _units).then((weatherForcast: IWeather) => {
        this.setState({
          weatherForcast: weatherForcast
        })
      })

      this.getLocation(this.props.latitude, this.props.longitude).then((location: ILocation) => {
        this.setState({
          Locations: location
        })
      })
    }
  }

Hope it can help somebody Thanks @willman for helping