0

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

6
  • Please help, It will be much appreciate
    – Milind
    Jan 4, 2020 at 17:07
  • onAfterPropertyPaneChangesApplied should be invoked automatically whenever a user changes something in the property pane, but I don't think there is enough information here to help, can you post the rest of your component, including how you have set up the property pane? Perhaps provide a sharing link to a page with this webpart in action?
    – willman
    Jan 5, 2020 at 22:09
  • 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 and new value. I don't know it correct way or not. my repo github.com/milindsaraswala/weather. Please if you can check
    – Milind
    Jan 6, 2020 at 6:14
  • I get a 404 clicking on the repo link in your comment, you may need to change permissions to allow others to see your repo.
    – willman
    Jan 6, 2020 at 13:11
  • 1
    Thanks @Milind, I now have access and reviewed your code. I will note that I did not download or compile, so I cannot guarantee that I didn't miss something somewhere, but it appears you have everything set up correctly. componentDidUpdate is the correct place to update your state regardless of whether the property pane is in reactive or non-reactive mode. In Reactive mode, the componentDidUpdate would be called in "real time" as the user makes changes to values in the property pane, in non-reactive componentDidUpdate only gets called when the user clicks the "Apply" button in the pane.
    – willman
    Jan 6, 2020 at 16:42

1 Answer 1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.