обновление state при каждом вызове функции

190

13 декабря 2021, 01:20

export default class App extends Component {
  state = {
    films: films,
    tags: null,
    limit: 15,
    term : ''
  }
 increaseLimit = (limit) => {
    const newLimit = limit + 15;
    return newLimit;
  }
  showMore = () => {
    this.setState(({ limit }) => {
      return {
        limit : this.increaseLimit(limit),
      }
    });
  };

  onSearch = ( items, term) => {
    if (term.length === 0) {
      return items;
    }
    return items.filter((item) => {
      return item.title
        .toLowerCase()
        .indexOf(term.toLowerCase()) > -1;
    });
  };
render() {
    const { films, limit, term } = this.state;
    let showButton;
    const filteredList = this.onSearch( films, term );
    Object.keys(filteredList).length > limit ? showButton = true : showButton = false;
    return (
      <div className="app">
        <TabButtons />
        <SearchPanel 
          onSearchChange={ this.onSearchChange }/>
        <FilmList 
          films={ filteredList }
          limit={ limit }/>
        { showButton ? (
          <ShowMoreButton showMore={ this.showMore }/>
        ) : (
          null
        )}
      </div>
    );
  };
};

Хочу чтобы при вызове функции onSearch - стэйт Limit принимал значение 15. При попытке написать там что-то вроде this.setState ({ limit : 15 }) оно вызывает ошибку о том что происходит бесконечный вызов функции. Сама идея в том, что когда список изменяется с помощью фильтра - лимит вывода бы становился снова 15, так как он каждый раз увеличивается, когда нажимаешь на кнопку

Answer 1

Добавил функцию refreshLimit


  refreshLimit = (limit) => {
    this.setState({ limit })
  }

Добавил refreshLimit на саму строку поиска

  <SearchPanel 
          onSearchChange={ this.onSearchChange }
          refreshLimit={ this.refreshLimit } />

В самом коде компонента вызываю её


export default class SearchPanel extends Component {
  state = {
    term: '',
  }
  onSearchChange = (e) => {
    const term = e.target.value,
          limit = 15;
    this.setState ({ term });
    this.props.onSearchChange(term);
    this.props.refreshLimit(limit);
  }
  render() {
    return (
      <input type="text"
            className="form-control search-input"
            onChange={this.onSearchChange}
            placeholder="type to search" />
    )
  }
}