Реагируйте: this.state.renderData.filter не является функцией - PullRequest
Новая
       15

Реагируйте: this.state.renderData.filter не является функцией

0 голосов
/ 30 марта 2019

Я работаю над проектом React.Я использую поисковый фильтр в своем проекте, но в то же время, когда пользователь вводит что-то в поле поиска, я получаю сообщение об ошибке this.state.renderData.filter is not a function.Я новичок в ReactJS.

Код 

<code>    class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}
Изменить ссылку )}} ReactDOM.render (, document.querySelector ('div # my-example'))

1 Ответ

1 голос
/ 30 марта 2019

Проблема в том, что ваше начальное состояние 

this.state = {
  renderData:[],
  ...
}

перезаписывается при вызове componentWillReceiveProps(nextProps, renderProps) {...}.

Рассмотрим следующий вызов connect(...): 

connect(
  mapStateToProps,
  { getParties, searchData }
)(Organization)

Второй аргумент функции connect() - обычно называемый mapDispatchToProps, который в вашем случае является объектом - ожидает, что его атрибуты будут создателями действий (функциями). Вызов connect(...) установит для searchData вашего компонента значение создателя действия, которое вы импортируете с помощью import { getParties, searchData } from "../../actions";.

Потому что 

componentWillReceiveProps(nextProps, renderProps) {
  ...
  this.setState({
    ...,
    renderData: nextProps.searchData
  });
  ...
}

вызывается до рендеринга вашего компонента, значение this.state.renderData не будет [], но создатель действия и, следовательно, filter не является функцией вашего создателя действия.

...