Блог

Главная - Вопросы по программированию - Реагировать: this.state.renderData.filter не является функцией

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

#javascript #arrays #reactjs #ecmascript-6 #react-redux

#javascript #массивы #reactjs #ecmascript-6 #реагировать-redux

Вопрос:

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

Код

     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)}amp;amp;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()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

Комментарии:

1. Вы уверены, что nextProps.searchData это массив?

2. Можете ли вы перед тем, как пытаться ее отфильтровать, выполнить выборку console.log(this.state.renderData) и сообщить, что это такое?

3. @larz. Это дает пустой массив

4. @UjinT34 . Да, это массив

5. Ну, [].filter совершенно определенно является функцией. Возможно, вы упускаете что-то еще, о чем пытается сообщить вам сообщение об ошибке?

Ответ №1:

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

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

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

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

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

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

Потому что 

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

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