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

Improve this question
5
  • Please help, It will be much appreciate Commented 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? Commented 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 Commented 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. Commented 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. Commented Jan 6, 2020 at 16:42

1 Answer 1

Reset to default
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

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.