`this.setState` not a function in a bound function

Question

Sorry I can see this question has ben asked a few times. I have solved this before, but know I am seeing it in a new way.

Here is my constructor in a flux store:

class TodoStore extends EventEmitter {
  constructor() {
    super()
    this.state = {
      todos: [
        {
          id: uuid(),
          text: 'Go Shopping',
          complete: false
        },
        {
          id: uuid(),
          text: 'Pay Water Bill',
          complete: false
        },
      ],
      showCompletedTodos: true,
      showIncompletedTodos: true
    }

    this.deleteTodo = this.deleteTodo.bind(this)
    this.toggleTodo = this.toggleTodo.bind(this)
    this.toggleShowCompletedTodos = this.toggleShowCompletedTodos.bind(this)
    this.toggleShowIncompletedTodos = this.toggleShowIncompletedTodos.bind(this)
  }

And here are a few of the functions I am calling via TodoActions.fuctionName in a child component:

// Toggle the showing of completed todos
toggleShowCompletedTodos() {
    this.setState({
        showCompletedTodos: !this.state.showCompletedTodos
    })
}

// Toggle the showing of incompleted todos
toggleShowIncompletedTodos() {
    this.setState({
        showIncompletedTodos: !this.state.showIncompletedTodos
    })
}

deleteTodo(todoToDelete) {
    this.setState({
        todo: this.state.todos.filter( function(todo) {
            return todo.id !== todoToDelete.id
        })
    })
}

I get Uncaught TypeError: this.setState is not a function when I trigger this functions.

In the past bind in the functions to this in the constructor solves this, but in this, is is not working

This is my referance: this.setState is not a function

Is it because it is a Flux store and not a normal class?

Answer 1

It appears as though you are calling this.setState from a class inhering from EventEmitter but this.setState is a function of the Component class, you can't call it from a class extending EventEmitter.