過濾JSON的陣營

我使用FETCH加載一些JSON數據。我試圖在顯示的內容上添加/創建一個簡單的過濾功能。過濾JSON的陣營

我得到這個錯誤：

遺漏的類型錯誤：未定義

任何想法，這可能是導致該錯誤而無法讀取屬性「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" 
    } 
]

來源

2016-09-22 John

您可以驗證帳戶會被填充在控制檯？我的猜測是你的'fetch'不綁定到組件本身 – kasperite

似乎

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

因爲l.name是不確定的，你得到了來自該行的錯誤。您可以再次檢查您的JSON數據。它沒有名稱屬性，好像是產品。

你不應該被直接修改您的狀態：庫= libraries.filter ... 國家應的setState功能進行更新。在這種情況下，您應該創建臨時變量來顯示結果，而不是直接使用庫變量。我相信，如果你的樣品工作，你只可以搜索在第一時間和下一次的結果將是隻在上次搜索結果，雖然。

來源

2016-09-22 03:30:19

總管Hieu嗨，你是正確的應該是產品。非常感謝。 – John

過濾JSON的陣營

回答

相關問題