Состояние не обновляется, что я упустил?

Question

[Jedi]

Здравствуйте!

Поиск работает только с первого раза. Потом, когда состояние должно вернуться после фильтрации, этого почему-то не происходит.

Посмотрите, пожалуйста, что я мог упустить?

https://jsfiddle.net/anfc4qqj/

Заранее большое вам спасибо!

Comments

[planc]

у тебя в state.displayedPeoples изначально массив Peoples, затем ты присваиваешь ему только найденых людей....
что ты ожидаешь получить назад, если ты все удалил ?

[Jedi]

planc, А теперь понятно стало. Спасибо большое!

Answer 1

[0xD34F]

Поиск работает только с первого раза. Потом, когда состояние должно вернуться после фильтрации, этого почему-то не происходит.

Да понятно почему - вы при поиске выкидываете объекты раз и навсегда, нечему возвращаться.

Передавайте исходный массив данных в props, и фильтруйте при поиске его:

class App extends React.Component {
  state = {
    people: this.props.people,
  };

  handeSearch = e => {
    const search = e.target.value.toLowerCase();

    this.setState((state, { people }) => ({
      people: people.filter(n => n.name.toLowerCase().includes(search)),
    }));
  }

  render() {
    return (
      <div className="contacts">
        <input
          type="text"
          className="search-field"
          onChange={this.handeSearch}
        />
        <ul className="contacts-list">
          {this.state.people.map(n => <Person key={n.id} {...n} />)}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <App people={Peoples} />,
  document.getElementById('root')
);

Comments

[Jedi]

Спасибо!