过滤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的阵营

回答

相关问题