输入搜索过滤器不起作用（反应）

Question

拥有适用于 React、Redux 和 AJAX 的组件：

    class IncomeProfile extends Component {
      constructor(props) {
        super(props)

        this.state = {
          items: this.props.items || []

        }
      }
      componentDidMount() {
        this.props.IncomeListProfile();

      }
componentWillReceiveProps(nextProps) {
    this.setState({ items: nextProps.items });
}

      filterList(event) {
        var updatedList = this.state.items;
        updatedList = updatedList.filter(function(item) {
          return item.toLowerCase().search(event.target.value.toLowerCase()) !== -1;
        });
        this.setState({items: updatedList}); // now this.state.items has a value
      }

      render() {
        var elems = this.props.items;
        if (typeof elems == 'undefined') {
          elems = [];
        }
        //console.log(elems);
        return (
          <div>
            <table className='table'>
              <thead className='theadstyle'>
                <th>date
                  <input></input>
                </th>

                <th>
                  <input onChange={this.filterList} type='text' placeholder='keyword search'></input>
                </th>
                <th>
                  <input type='text' placeholder='amount search'></input>
                </th>
                <th>amount</th>
                <th>Show archived</th>
              </thead>
              <div className='tbodymar'></div>
              <tbody >
                {elems.map((item) => (

                  <tr key={item.course_id}>
                    <td>{item.created_at}</td>
                    <td>{item.name}</td>
                    <td>{item.remark}</td>
                    <td>{item.income_amount}</td>
                    <td>more options</td>
                  </tr>

                ))}
              </tbody>
            </table>
          </div>
        )

      }
    }

    const mapDispatchToProps = function(dispatch) {
      return {
        IncomeListProfile: () => dispatch(IncomeProfileList())

      }
    }

    const mapStateToProps = function(state) {
      //var mystore = state.toJS()
      var mystore = state.getIn(['incomeProfileList'])['course_list'];

      //console.log(mystored.hh);
      var copy = Object.assign({}, mystore);
      return {items: copy.course_list};

    }
    export default connect(mapStateToProps, mapDispatchToProps)(IncomeProfile);

当我在输入中输入内容时，我收到错误无法读取未定义的属性“状态”，但 console.log 显示的是我的状态。过滤器有什么问题？哪里错了？如果我有正确的状态？

Answer 1

this.props.items 仅在componentDidMount 之后填充？ 如果是这样，并且您也想在state 中设置项目。您可以使用componentWillReceiveProps 方法将新道具设置为您的状态。

componentWillReceiveProps(nextProps) {
    this.setState({ items: nextProps.items });
}