How to initialize from setstate in Reactjs?

Question

_handleClickFilter(value, xname, chartId){
    console.log("dataSourceId", this.state.dataSource);
    this.setState({
          filterData: [{
          filter: "equals",  
          value:value ,
          attribute:xname, 
        }]
        });

    let filterdefinitions = {
        dataSourceId : "59ef50d6e4b054efd6d8aa53",
        filterDefinitions: this.state.filterData,
      }

      let data = {
        filterDefinitions: [filterdefinitions],
      };
      DashboardAction._ApplicableFilterToDashboard(data, this.props.params.dashboardId);
      DashboardAction._ApplicableFilterToChart(data, this.props.params.dashboardId, chartId);
      DashboardAction._saveFilterToDashboard(data, this.props.params.dashboardId);


}

I am able to get values in the setstate which I want. But the values are not getting set. Showing the values exists in the this.state only.

thanks in advance

Are you sure that your component mounted, be carefull about that react is stateful — Ferhat BAŞ
– Ferhat BAŞ, Commented Oct 26, 2017 at 9:05
Try removing the extra comma to the key filterDefinitions in the object filterdefinitions — Abhishek Raj
– Abhishek Raj, Commented Oct 26, 2017 at 9:46

César Landesa · Accepted Answer · 2017-10-26 10:35:50Z

setState is async, so it's not guaranteed that the state will be set after you have used it until the re-render is triggered. You should be very careful about using the state right after you have set it, a more 'reactive' approach is usually better. However, if you want to make sure that you'll be able to access the new state, you can use the second argument of setState which is a callback function that will be called when the state is set.

You can use it this way:

_handleClickFilter(value, xname, chartId){
    this.setState({
          filterData: [{
          filter: "equals",  
          value:value ,
          attribute:xname, 
        }]
    }, () => {

    let filterdefinitions = {
        dataSourceId : "59ef50d6e4b054efd6d8aa53",
        filterDefinitions: this.state.filterData,
      }

      let data = {
        filterDefinitions: [filterdefinitions],
      };
      DashboardAction._ApplicableFilterToDashboard(data, this.props.params.dashboardId);
      DashboardAction._ApplicableFilterToChart(data, this.props.params.dashboardId, chartId);
      DashboardAction._saveFilterToDashboard(data, this.props.params.dashboardId);

    });
}

Abhishek Raj · Accepted Answer · 2017-10-26 10:27:40Z

1

Replace your set state code with this

   this.setState({ 
        filterData: this.state.filterData.map((data, index) => {
        data.filter = "equals",
        data.value = value,
        data.attribute=xname
}) });

answered Oct 26, 2017 at 10:27

Abhishek Raj

5123 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to initialize from setstate in Reactjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related