반응의 JSON 필터링하기

Question

FETCH를 사용하여 JSON 데이터를로드하고 있습니다. 나는 추가/콘텐츠를 표시하는 간단한 필터링 기능을 만들려고 노력하고있어.

catch되지 않은 형식 오류 :이 오류의 원인이 될 수있는 것을 정의되지 않은

어떤 생각의 속성을 읽을 수 없습니다 '와 toLowerCase'

는이 오류를 받고 있어요? 지금까지

이 내 코드 :

let Table = React.createClass({ 
    getInitialState: function(){ 
     return { 
      accounts: [{ 
       "product": "Fixed Saver", 
       "interestRate": 2.20, 
       "minimumDeposit": 500, 
       "interestType": "Fixed" 
      }], 
      searchString: '' 
     } 
    }, 
    componentDidMount: function(){ 
     fetch('http://localhost:8888/table/json/accounts.json') 
      .then(response => { 
       return response.json() 
      }) 
      .then(json => { 
       this.setState({accounts: json}) 
      }); 
    }, 
    handleChange: function(e){ 
     this.setState({searchString:e.target.value}); 
    }, 
    render: function(){ 
     var libraries, 
     libraries = this.state.accounts, 
     searchString = this.state.searchString.trim().toLowerCase(); 

     if(searchString.length > 0){ 
      libraries = libraries.filter(l => { 
       return l.name.toLowerCase().match(searchString); 
      }); 
     } 

     return (
      <div className="container"> 

      <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" /> 

       <ul className="header clearfix"> 
        <li>Product</li> 
        <li>Interest rate</li> 
        <li>Minimum deposit</li> 
        <li>Interest type</li> 
       </ul> 

       {libraries.map(l => { 
       return (
        <div className="account clearfix" key={l.id}> 
         <div className="product">{l.product}</div> 
         <div>{l.interestRate} %</div> 
         <div>£ {l.minimumDeposit}</div> 
         <div>{l.interestType}</div> 
        </div> 
        ) 
       })} 
      </div> 
     ) 
    } 
}); 

let App = React.createClass({ 
    render: function(){ 
     return(
      <Table /> 
     ); 
    } 
}); 

ReactDOM.render(<App />, document.getElementById('table')); 

JSON

[ 
    { 
     "id": 1, 
     "product": "Fixed Saver", 
     "interestRate": 2.20, 
     "minimumDeposit": 500, 
     "interestType": "Fixed" 
    }, 
    { 
     "id": 2, 
     "product": "Fixed Saver", 
     "interestRate": 1.50, 
     "minimumDeposit": 0, 
     "interestType": "Tracker" 
    }, 
    { 
     "id": 3, 
     "product": "Offset Saver", 
     "interestRate": 1.8, 
     "minimumDeposit": 1000, 
     "interestType": "Fixed" 
    } 
] 

Answer 1

는 l.name이 정의되지

libraries = libraries.filter(l => { 
    return l.name.toLowerCase().match(searchString); 
}); 

의 때문에 당신이이 줄에서 오류가 발생했습니다 보일 . JSON 데이터를 다시 확인할 수 있습니다. 이름 속성이 없으므로 제품 인 것 같습니다.

다음과 같이 상태를 직접 수정하면 안됩니다. libraries = libraries.filter ... 상태는 setState 함수로 업데이트해야합니다. 이 경우 직접 변수 library를 사용하는 대신 결과를 표시하기 위해 임시 변수를 만들어야합니다. 샘플이 효과가 있다고 믿는다면, 처음 검색했을 때만 다음 번에 검색 할 수 있습니다.하지만 검색 결과는 마지막 검색 결과에만 표시됩니다.