入力検索フィルタが機能していない（リアクト）

Question

と反応働く成分を有し、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); 

私は入力に何かを入力すると、私はエラーを取得するプロパティを読み取ることができません未定義の「状態」が、コンソール.logショーは私の状態です。フィルタには何が問題なのですか？間違いはどこですか？もし私に正しい状態があったら？

Answer 1

this.props.itemscomponentDidMountの後にのみ生成されますか？ その場合は、stateにも項目を設定します。 componentWillReceivePropsメソッドを使用して、新しい小道具をあなたに設定することができます。

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