反应：this.state.renderData.filter 不是一个函数答案

【问题标题】：React : this.state.renderData.filter is not a function反应：this.state.renderData.filter 不是一个函数
【发布时间】：2019-03-29 21:13:35
【问题描述】：

我正在做一个 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)}&&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' ))

【问题讨论】：

你确定nextProps.searchData是一个数组吗？
您能在尝试过滤它并告诉它它说的是什么之前折腾console.log(this.state.renderData)吗？
@larz。它给出了一个空数组
@UjinT34 。是的，它数组
嗯，[].filter 绝对是一个函数。也许您错过了错误消息试图告诉您的其他内容？

标签： javascript arrays reactjs ecmascript-6 react-redux

【解决方案1】：

问题是你的初始状态

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 不是你的动作创建者的一个函数。

【讨论】：