shaman60

Дело в том, что setState меняет состояние не сразу после вызова (не синхронно), а когда-нибудь, поэтому неизвестно заранее, когда именно state будет реально изменени. Поэтому setState в качестве аргумента может принимать как объект так и функцию (коллбэк). И вот в этот самый коллбэк всегда передается текущее актуальное состояние. Поэтому твой код надо переписать как-то так:

export default class App extends Component {
  state = {
    items: []
  };

  add = (item) => {
    this.setState((state) => ({
        ...state,
        items: [...state.items, item]
    }));
  };

  remove = (id) => {
    this.setState((state) => 
      return {
        ...state,
        items: state.filter(item => item.id !== id),
      }
    );
  };

  updateItem = (id, item) => {
    item.text = 'blabla';
    this.remove(id);
    this.add(item);
  }
  // Дальше остальные методы, рендер итд...
}

Другой вариант - отвязать методы add и remove от this.state, и передавать им state непосредственно. И этот вариант более правильный, т.к. он более явный, кроме того каждый вызов setState потенциально ведет к перерендеру, что нежелательно.

Поэтому как-то так:

export default class App extends Component {
  state = {
    items: []
  };

  add = (state, item) => ({
    ...state,
    items: [...state.items, item]
  });

  remove = (state, id) => ({
    ...state,
    items: state.filter(item => item.id !== id),
  });

  updateItem = (id, item) => {
    item.text = 'blabla';
    this.setState(state =>  this.add(this.remove(state, id), item));
  }
  // Дальше остальные методы, рендер итд...
}

https://reactjs.org/docs/state-and-lifecycle.html#...

Как уже выше писали - слишком запутано для такой простой задачи. Код должен быть простым и лаконичным. Помимо выше перечисленного заметил вот этот странный код:

(function () {
		UiCtrl.createForm();
	}());

Не понятно зачем надо оборачивать вызов метода?

Рекомендации:

• Юзайте редактор с подсказками eslint. Например Intellij Idea + eslint + airbnb style. Это вас научит писать код в одном стиле.
  
• Юзайте современный front-end stack -> nodejs + es6-7 + webpack + ...
  
• Изучите -> Vue + React + Angular. Напишите несколько демо-проектов.
  
• Напишите резюме. Найдите как написать в современном стиле.
  
• Найдите понравившуюся вакансии в крупной-средней фирме. И изучите все что требуется для данных вакансий. После - отправьте резюме во все.
  
• Проходите тех-собеседования регулярно.
  
  

Сразу по первой функции

1. workers объявлена, но нигде не используется,

const workers = [
    {
      name: 'Mike',
      work: 'Google',
      id: 0
    }
  ];

Тогда уж поместить внутрь возвращаемого объекта

return {
    workers: [{
      name: 'Mike',
      work: 'Google',
      id: 0
    }],

2. Вместо

addWorker(worker) {
      worker.id = workers.length;
      workers.push(worker);
    },

кошернее

addWorker(worker) {worker.id = workers.push(worker);}

чтобы нумерация начиналась с единицы а не с нуля. Либо

addWorker(worker) {workers.push([...worker, id: workers.length + 1]);}

3. функцию removeWorker проще и рациональней переписать в виде

removeWorker(worker) {
        const id = Number(worker.dataset.id);
        const index = workers.findIndex(item => item.id === id);
        workers.splice(index, 1);
    },

4. Код функции isWorkerEmpty можно сократить

isWorkerEmpty(worker) {return Object.values(worker).every(v=>v);}

5. Почему функция возвращения workers называется getUsers не очень понятно.