setState is not defined

Question

I have a print function, it first sets the state of isPrinting to true and open a pring dialog. Once the dialog is being closed it sets the state of isPrinting to false and at this point I'm getting the error (second setState):

Uncaught ReferenceError: setState is not defined

I binded function to current context with the arrow function.

  handlePrint = () => {
    this.setState({ isPrinting: true }, () => { //setState is working working properly
      window.print();
      if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener = (mql) => {
          if (!mql.matches) {
            this.setState({ isPrinting: false }); //Error
          }
        }
      }
    });
  };

@VikashSingh Yes, `export default class SearchResultsPanel extends Component {` — user3378165, Apr 02 '19 at 10:51
https://stackoverflow.com/a/20279485/1320407 this answer explains why setState is not defined inside the callback of mediaQueryList.addListener. Try prabu-samvel's answer for an apt solution. — anurag, Apr 02 '19 at 10:55

score 1 · Answer 1 · answered Apr 02 '19 at 10:35

1

Try this.

handlePrint = () => {
let _this = this;
this.setState({ isPrinting: true }, () => {
  window.print();
  if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener = (mql) => {
      if (!mql.matches) {
        _this.setState({ isPrinting: false });
      }
    }
  }
});
};

answered Apr 02 '19 at 10:35

Prabu samvel

1,213
8
19

Thank you, I don't get the error anymore but the state doesn't update to `false`. – user3378165 Apr 02 '19 at 11:03

score 1 · Accepted Answer · answered Apr 02 '19 at 11:19

I am not sure what you are trying to achieve here but the window.print() freezes the app. There is no code being run unless someone clicks the printing screen away. I works just like window.alert("..."). You can try that by printing a thimestamp right after the win.print. So besides that there is a problem with the this context that cannot be reached the whole function is useless. Because you could just do:

  handlePrint = () => {
    this.setState({ isPrinting: true }, () => {
      window.print() //freezes until someone clicks it away.
      this.setState({ isPrinting: false }) //Error
    })
  }

Regards

score 0 · Answer 3 · edited Apr 02 '19 at 11:40

0

At the second time, instead of setState, just return the new state like:

return {
  isPrinting: false,
};

edited Apr 02 '19 at 11:40

Amol B Jamkar

1,227
10
19

answered Apr 02 '19 at 10:36

Joan

68
5

score 0 · Answer 4 · answered Apr 02 '19 at 10:49

This should help

  handlePrint = () => {
    this.setState({ isPrinting: true }, () => { //setState is working working properly
      window.print();
      if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener = (mql) => {
          if (!mql.matches) {
            return { isPrinting: false };
          }
        }
      }
    });
  };

setState method should return a new state rather than try to execute anything.

score -1 · Answer 5 · answered Apr 02 '19 at 10:35

-1

How did you use the function 'mediaQueryList.addListener'?You can console the two 'this' and see if they are same.

answered Apr 02 '19 at 10:35

Jack

46
2

setState is not defined

5 Answers5