React.js Не обновляется содержимое на сайте при добавлении элемента в массив. Почему?

Question

[TjLink]

Делаю простенькую ToDo'шку на React.js с фильтром
Когда нажимаю на "ОК", в массив "users" добавляется новый элемент.
Но на сайте не обновляется и не появляется новый элемент.
Появляется только тогда, когда в строку поиска начинаю писать имя, потом всё стираю и вот тогда появляется
Почему и как исправить?

var users = [
  {
    id : 1,
    name : 'Piter',
    done : false
  },
  {
    id : 2,
    name : 'Mikle',
    done : true
  }
  ]


  class Search extends React.Component{
    state = {
    }
    change = (e) => {
      var newText = e.target.value.trim();
      this.props.filter(newText);
    }
    render(){
      return (
        <div>
          <input type="text" onChange={this.change} />
        </div>
      )
    }
  }




  class Item extends React.Component {
    state = {
    }
    render(){
      return <h1>{this.props.data.name}</h1>
    }
  }



  class App extends React.Component {
    state = {
      people : this.props.data
    }
    filterList = (newText) =>{
      var newMass = this.props.data.filter(function(user){
        return (user.name).toLowerCase().search(newText.toLowerCase()) !== -1;
      })
      this.setState({people : newMass})
    }
      press = () => {
      users.push({id: 3, name: 'Hello', done: false})
      console.log(users);
    }
    render(){
      return(
        <div className="mainBlock">
        <button type="submit" onClick={this.press}> OK </button>
        <Search filter={this.filterList}/>
          {
            this.state.people.map(function(user){
              return <Item key={user.id} data={user} />
            })
          }
        </div>
      )
    }
  }
  ReactDOM.render(<App data={users}/>, document.getElementById('root'))

Answer 1

[Даша Циклаури]

потому что ты добавляешь в массив users, который не является свойством внутри state. Соответственно у тебя state не меняется, поэтому реакт не обновляет компонент, нужно изменить state.
this.state.people.push() // пушить сюда

Comments

[Александр]

Поправлю лишь что спека не рекомендует изменять стейт напрямую

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

https://reactjs.org/docs/react-component.html

[TjLink]

Я разобрался с своей проблемой благодаря Даше, т.к. напомнила про рендер компонента при изменении состояния state
Решение простое :

let mass = this.state.people
 mass.push({id: 3, name: 'Hello', done: false})
 this.setState({people : mass})

Спасибо.

[TjLink]

Александр, именно, опередили меня с ответом :D

[TjLink]

Но осталась ещё проблема, когда добавляешь элемент в массив ( в state ), то после того, как я что-либо напишу в строке поиска, элемент пропадает, так как массив переписывается

class App extends React.Component {
    state = {
      people : this.props.data
    }
    filterList = (newText) =>{
      var newMass = this.props.data.filter(function(user){
        return (user.name).toLowerCase().search(newText.toLowerCase()) !== -1;
      })
      this.setState({people : newMass})
    }

Правильно ли я понимаю, что уже в этой ситуации нужен Redux ?

[Антон Спирин]

Решение нарушает идеологию React. Автору ответа не мешало бы почитать о том, что такое иммутабельность и зачем она нужна.

TjLink, вы неправильно подходите к решению задачи. У вас в состоянии должно храниться значение фильтра:

class Example extends Component {
  state = {
    users: this.props.data,
    filter: '',
  };

  press = () => {
     this.setState(prevState => ({
       users: [
         ...prevState.users,
         { id: prevState.users.length + 1, name: 'Hello', done: false },
       ],
     }));
  };

  render() {
    const { users, filter } = this.state;

    return (
      <div>
        {users.filter(user => user.name.toLowerCase().search(filter.toLowerCase() !== -1).map(user => (
          <User key={user.id} user={user} />
        ))}
      <div>
    );
  }
}

[Даша Циклаури]

да, ребят спасибо! имелось в виду мнемоника))
по хорошему конечно все операции через setState, и помнить, что если нужно мутировать на основе существующего, только через callback.

[Тимофей Шайко]

TjLink, Да, если у тебя проект разрастется в размерах, то без Редукса будет потруднее работать со своими данными)